html datetime-local动态改变时间/显示当前时间

最新推荐文章于 2024-10-11 14:35:54 发布

TLScott

最新推荐文章于 2024-10-11 14:35:54 发布

阅读量1w

点赞数 6

分类专栏： html 文章标签： html datetime-local 当前日期当前时间改变日期时间

本文链接：https://blog.csdn.net/chen_soldier/article/details/85992975

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍如何使用JavaScript动态设置HTML中的datetime-local输入框的时间。通过使用document.querySelector和value属性，可以为单个datetime-local元素设置特定时间，包括当前时间。适用于需要在网页上动态调整日期和时间的应用场景。

摘要由CSDN通过智能技术生成

找了很多资料都没找到如何在script中改变datetime-local的显示时间，只能在value属性中设置一个固定的值，用document.getElementById(‘begdate’).innerHTML无法获取与设置时间，因此觉得有必要看看html datetime-local在官方文档里是如何使用的

在https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local中找到这两句：
var dateControl = document.querySelector(‘input[type=“datetime-local”]’);
dateControl.value = ‘2017-06-01T08:30’;
试了一下只有第一个元素生效，原因是querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素，如果返回所有的元素要使用 querySelectorAll() 方法替代

所以如果有多个datetime-local要显示不同的时间的话那就用id来选择：
var dateControl = document.querySelector("#begdate");
dateControl.value = ‘2017-06-01T08:30’;
dateControl = document.querySelector("#enddate");
dateControl.value = ‘2019-01-07T11:09’;

如果要显示当前时间，加个属性：，再使用下面的script
（注：ie或某些浏览器不支持datetime-local）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>


<body "getbegtime()">
    <p>起始时间：</p>
    <input type="datetime-local" name="begdate" id="begdate">
    <p>结束时间：</p>
    <input type="datetime-local" name="enddate" id="enddate">

    <script>
        function getbegtime() {
            var today = new Date();
            var yyyy = today.getFullYear();
            var MM = today.getMonth() + 1;
            var dd = today.getDate();
            var hh = today.getHours();
            var mm = today.getMinutes();
            MM = checkTime(MM);
            dd = checkTime(dd);
            hh = checkTime(hh);
            mm = checkTime(mm);
            var time = yyyy + "-" + MM + "-" + dd + "T" + hh + ":" + mm;

            var dateControl = document.querySelector("#begdate");
            dateControl.value = time;

            dateControl = document.querySelector("#enddate");
            dateControl.value = time;

            function checkTime(i) {
                if (i < 10) {
                    i = "0" + i;
                }
                return i;
            }
        }

    </script>
</body>