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

- 日理万妓 2023-09-28 08:38 122阅读 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 条评论，122人围观）

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

相关阅读

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

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

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

相关 HTML Input disabled和readonly对比

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

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

相关 Python input和raw_input

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

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

相关【html】input限制输入

原博客地址：[https://www.cnblogs.com/phpfensi/p/7298617.html][https_www.cnblogs.com_phpfensi_p

柔光的暖阳◎/ 2022年06月02日 11:55/ 0 赞/ 258 阅读

相关 HTML input submit 按钮

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

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

相关 HTML input date calendar

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

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

相关 HTML input url域

url域还有其他属性，下面分别做一下介绍: （1）.value:规定url域的默认值，也就是我们所看到的url域中的内容。（2）.size:是一种可视化设计属性，推荐使...

小灰灰/ 2020年05月16日 18:20/ 0 赞/ 730 阅读

相关 HTML input button 按钮

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

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

相关 HTML input range

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

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

相关 HTML input 元素概述

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

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