HTML5 Input日期选择器实践：date/week/month/time及datetime-local用法

脚本专家 · 发表于 4 小时前

HTML5 引入了一系列原生日期时间输入类型，无需依赖第三方日历插件即可实现日期选择功能。本文详解 <input> 元素提供的 date、week、month、time、datetime（已废弃）及 datetime-local 类型，并给出一个可运行的 datetime-local 示例代码。

## 日期时间输入类型概览

1. **date**（<input type="date" />）
最基本的日期选择器，用户只能从日历中选择某个具体日期，格式通常为 yyyy-MM-dd。

2. **week**（<input type="week" />）
选择的是某一周，而非具体日期。显示方式为“年-W周数”，例如 2025-W14。

3. **month**（<input type="month" />）
选择月份，格式为 yyyy-MM，不包含日信息。

4. **time**（<input type="time" />）
仅选择时间（小时和分钟），无日历组件，格式 HH:mm（或包含秒，视浏览器而定）。

5. **datetime**（<input type="datetime" />）
同时显示日期和时间选择器，但该类型已在 Chrome 中失效，属于已废弃特性。官方推荐使用 datetime-local 替代。

6. **datetime-local**（<input type="datetime-local" />）
是 datetime 的现代替代方案，支持选择本地日期和时间，格式为 yyyy-MM-ddTHH:mm。

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

以下示例演示如何用 datetime-local 创建一个带默认值的日期时间选择框，并在页面加载时自动填充当前时间。使用了 jQuery 库简化 DOM 操作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>datetime-local 示例</title>
</head>
<body>
<label>
<span>选择日期</span>
<input type="datetime-local" class="measureDate" placeholder="请选择日期">
</label>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<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>

复制代码

### 代码解析

- 使用 `new Date()` 获取浏览器当前本地时间。
- 分别提取年、月、日、时、分，并通过三元运算符补零，确保月份、日期、小时、分钟始终为两位数（例如 03 而不是 3）。
- 拼接字符串时，月、日、时、分之间用连字符和冒号分隔，日期和时间之间用大写字母 T 连接，这是 datetime-local 所要求的 ISO 格式：`yyyy-MM-ddTHH:mm`。
- 通过 jQuery 选择器 `$('.measureDate')` 找到 `<input>` 元素，调用 `.val(curDay)` 设置其值为当前时间。

### 注意事项

- `datetime-local` 在移动端浏览器中会自动唤起设备原生日历和时间选择器，用户体验良好。
- 旧版浏览器可能不支持该类型，届时会退化为普通文本输入框，可结合 polyfill 或 Modernizr 进行降级处理。
- 获取用户选择的值时，可以通过 JavaScript 读取 `input.value`，得到的字符串格式与设置时一致（如 "2025-04-12T14:30"）。

通过以上代码，开发者可以快速为表单添加原生日期时间选择功能，无需引入额外依赖库。

热心网友7 · 发表于 4 小时前

非常实用的分享！HTML5原生日期选择器确实能省去引入第三方库的麻烦，尤其在移动端体验很流畅。你用三元运算符补零的写法也很清晰，初学者容易理解。另外补充一点：datetime-local的值在提交表单时是本地时间字符串，处理时区要留意，后端最好统一转成UTC存储。感谢教程，收藏了！

HTML5 Input日期选择器实践：date/week/month/time及datetime-local用法

Re: HTML5 Input日期选择器实践：date/week/month/time及datetime-local用法

浏览过的版块

指导单位

旗下站点

联系我们