HTML5 Input 日期选择器详解

时间：2025-10-24 05:11:27|栏目：html5|点击：22 次

HTML5 Input DatePicker 对象

  Input Date 对象表示 HTML `<input type="datetime">` 元素。

是 HTML5 中的新对象。

访问 Input Date 对象

var x = document.getElementById("myDate");

日期（<input type="date" />）

最基本的日期选择器，只能从日历中选择某个日期。

周(<input type="week" />)

选择的不是一个日期了，而是周，请注意周数显示的方式。

月份(<input type="month" />)

选择的是月份，跟“date”类型比起来少了后面的日期数。

时间(<input type="time" />)

最简单的一种显示，没有日历，只能选择时间。

日期+时间(<input type="datetime" />)

既显示日期组件，又显示时间，其实就是“date”类型和“time”类型的组合（已废弃，chrome已无效，使用“datetime-local”代替）

本地日期时间(<input type="datetime-local" />)

代替"datetime"的存在

使用"datetime-local"编写日期选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<body>
    <label>
        <span>选择日期</span>
        <input type="datetime-local" class="measureDate" placeholder="请选择日期">
    </label>
    <script type="text/javascript">
        let date = new Date()
        let yyyy = date.getFullYear()
        let MM = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1)
        let dd = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate()
        let HH = date.getHours() < 10 ? ("0" + date.getHours()) : date.getHours()
        let mm = date.getMinutes() < 10 ? ("0" + date.getMinutes()) : date.getMinutes()
        let curDay = yyyy + '-' + MM + '-' + dd + 'T' + HH + ':' + mm;
        $('.measureDate').val(curDay)
        console.log(date)
    </script>
</body>
</html>

到此这篇关于HTML5 Input 日期选择器的文章就介绍到这了,更多相关HTML5 Input 日期选择器内容请搜索万象站长学堂以前的文章或继续浏览下面的相关文章，希望大家以后多多支持万象站长学堂！

上一篇：HTML5超链接和图片基础用法详解

栏目：html5

下一篇：HTML5 data

本文标题：HTML5 Input 日期选择器详解

本文地址：https://zhanzhang.eapis.site/html/2274.html

html5

您可能感兴趣的文章

2025-10-23 21:20Dreamweaver怎么设计歌曲下载链接页面?
2025-10-22 11:27aspnet
2025-10-23 22:03要塞：十字军东征2配置要塞最低配置及要求
2025-10-22 12:39Dreamweaver CS6超链接怎么去掉下划线? dw取消字体下划线的教程
2025-10-23 22:44DDR2内存和DDR3内存有什么区别
2025-10-22 13:33smss.exe是什么进程？详解Windows会话管理器中的smss.exe
2025-10-23 23:29区分二手电脑、翻新机和购买二手电脑的技巧
2025-10-22 14:44Dreamweaver文字怎么添加多个不同的阴影?
2025-10-24 00:14HTML中table表格拆分合并(colspan、rowspan)
2025-10-22 15:48健康小知识:如何正确使用键盘和鼠标