原生js 写日历

最新推荐文章于 2023-09-22 17:48:16 发布

大浪淘沙1024

最新推荐文章于 2023-09-22 17:48:16 发布

阅读量172

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45379180/article/details/120283415

版权

这篇博客介绍了如何在HTML5中使用原生的日期和时间输入控件，并通过JavaScript实现获取当前日期和时间的功能。示例代码展示了如何设置和获取日期及时间输入框的值，并提供了点击按钮获取当前时间的交互操作。

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

引用： https://blog.csdn.net/djk8888/article/details/79727826


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>html5原生自带的日期控件和时间控件</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(function () {
            NOW();
        });
        //初始化时间控件
        function NOW() {
            var now = new Date();
            var nowYear = now.getFullYear(); //年
            var nowMonth = now.getMonth() + 1 < 10 ? "0" + (now.getMonth() + 1) : now.getMonth(); //月
            var nowDay = now.getDate() < 10 ? "0" + now.getDate() : now.getDate(); //日期
            var nowHour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours(); //时
            var nowMinute = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes(); //分
            var nowDate = nowYear + "-" + nowMonth + "-" + nowDay;
            var nowTime = nowHour + ":" + nowMinute;
 
            $("#nowDate").val(nowDate);
            $("#nowTime").val(nowTime);
        }
 
        $(function () {
            $("#btnNow").click(function () {
                NOW();
            });
        });
    </script>
</head>
<body>
    <div>
        <input type="date" id="nowDate" />
        <input type="time" id="nowTime" />
        <input type="button" id="btn" value="获取时间" />
        <input type="button" id="btnNow" value="当前时间" />
    </div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            var nDate = $("#nowDate").val();
            var nTime = $("#nowTime").val();
            alert(nDate + " " + nTime);
        }); 
    });
</script>