57. 日期时间类输入

以前做日期选择，得引入一堆 JavaScript 库。现在 HTML5 自带了。

一行代码就能弹出日历。

date：日期选择

<input type="date" name="birthday">

点一下，浏览器弹出日历面板。用户点选日期即可。

限制日期范围

<input type="date" name="appointment" min="2026-01-01" max="2026-12-31">

min 和 max 限定可选日期范围。超出的日期灰色不可点。

<!-- 设置默认值 -->
<input type="date" name="meeting" value="2026-08-15">

日期格式必须是 YYYY-MM-DD。

time：时间选择

<input type="time" name="alarm">

弹出小时和分钟选择器。有些浏览器还支持秒。

<input type="time" name="start" min="09:00" max="18:00">

限制时间段为 9 点到 18 点。

datetime-local：本地日期时间

日期 + 时间，但没有时区信息。

<input type="datetime-local" name="event_start">

用户既选日期又选时间。适合”活动开始时间”这类场景。

month：月份选择

<input type="month" name="start_month">

只选年份和月份，不选具体哪一天。适合”入职月份”、“账期月份”。

week：周选择

<input type="week" name="vacation_week">

选某一年中的第几周。年份 + 周数。

五种类型一览

type 值	选择内容	值格式示例
date	年-月-日	2026-08-15
time	时:分	14:30
datetime-local	日期+时间	2026-08-15T14:30
month	年-月	2026-08
week	年-第N周	2026-W33

浏览器兼容性提示

所有现代浏览器都支持这些类型。

如果碰到不支持的浏览器，会自动降级为普通文本框。用户手动输入日期即可。这是”渐进增强”——有新功能更好，没新功能也能用。

完整示例

一个”预约会议室”表单：

<form>
  <p>
    <label>预约日期：
      <input type="date" name="date" min="2026-07-28" required>
    </label>
  </p>
  <p>
    <label>开始时间：
      <input type="time" name="start_time" min="09:00" max="18:00" required>
    </label>
  </p>
  <p>
    <label>结束时间：
      <input type="time" name="end_time" min="09:00" max="18:00" required>
    </label>
  </p>
  <p>
    <button type="submit">预约</button>
  </p>
</form>

原生、简洁、零 JavaScript。这就是 HTML5 给的底气。