HTML ＜input type=”date”＞和＜input type=”time”＞

- 日理万妓 2023-09-28 08:38 58阅读 0赞

<!DOCTYPE html>
    
    <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
    
            <label for="date-string">Date String</label>
            <input type="date" id="date-string"  name="date-string"/>
            <input type="time"  id="time-string" name="time-string">
            <script>
                var dateStringInput = document.querySelector('#date-string');
                var timeStringInput = document.querySelector('#time-string');
    
                dateStringInput.addEventListener('input', function () {
                    console.log(dateStringInput.value);
                    console.log(dateStringInput.valueAsDate.toString());
                });
                timeStringInput.addEventListener('input', function () {
                    console.log(timeStringInput.value);
                    console.log(timeStringInput.valueAsDate.toString());
                });
    
            </script>
        </body>
    </html>

![93b348db8e794a8195fbe931db9e4394.png][]

![cde6106546244751a4a9e06e409c87a8.png][]

[93b348db8e794a8195fbe931db9e4394.png]: https://img-blog.csdnimg.cn/93b348db8e794a8195fbe931db9e4394.png
[cde6106546244751a4a9e06e409c87a8.png]: https://img-blog.csdnimg.cn/cde6106546244751a4a9e06e409c87a8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，58人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML ＜input type=”date”＞和＜input type=”time”＞

<!DOCTYPE html> <html> <head> <title>TODO supply a titl

- 日理万妓/ 2023年09月28日 08:38/ 0 赞/ 59 阅读

相关 HTML Input disabled和readonly对比

禁用输入字段。代码示例 <form> <label for="disabled">Disabled</label><br> <input

忘是亡心i/ 2023年09月27日 11:25/ 0 赞/ 76 阅读

相关 03-HTML-form-input

html表单元素form 及表单输入域input 1. 作用将用户输入的数据提交给服务器. 2. 语法 <form a

快来打我*/ 2022年09月18日 01:56/ 0 赞/ 97 阅读

相关 Python input和raw_input

python有多种从控制台输入方式：使用input()、raw\_input()函数这两个函数在python的内置库里。 input()函数返回一个数值（

素颜马尾好姑娘i/ 2022年06月16日 00:20/ 0 赞/ 137 阅读

相关 HTML input submit 按钮

将`<input>`标签的type属性值设置为"submit"即可创建一个提交按钮。点击提交按钮，表单会有提交动作，下面结合代码实例进行一下介绍。

小灰灰/ 2020年05月16日 20:53/ 0 赞/ 757 阅读

相关 HTML input date calendar

HTML input date calendar 将`<input>`标签的type属性值设置为date即可创建日期calendar控件。 calendar控件是HTML...

小灰灰/ 2020年05月16日 18:24/ 0 赞/ 723 阅读

相关 HTML input button 按钮

HTML input button 按钮将`<input>`标签的type属性值设置为"button"即可创建一个按钮。点击按钮可以触发一个事件，通常需要结合Java...

小灰灰/ 2020年05月16日 18:07/ 0 赞/ 946 阅读

相关 HTML input image 按钮

HTML input image 按钮 `<input>`标签 type 属性值设置为 "image" 即可创建一个图片按钮。图片按钮与submit提交按钮一样，点击可...

小灰灰/ 2020年05月16日 18:04/ 0 赞/ 680 阅读

相关 HTML input range

通过鼠标拖动方式设置值是很方便的操作。将input的type属性值设置为"range"即可创建具有上述功能的控件。此控件是HTML5新增。

小灰灰/ 2020年05月16日 17:05/ 0 赞/ 802 阅读

相关 HTML input 元素概述

`< input>`是最为重要的表单元素。根据type属性值的不同，它可以表现为不同形式，功能更大相径庭。无论以何种形式展现或者何种方式使用，它的功能是输入数据。...

小灰灰/ 2020年05月16日 16:34/ 0 赞/ 763 阅读