HTML5的日期和时间选择控件

HTML5引入了原生的日期和时间选择控件，简化了表单中日期和时间输入的处理。这些控件提供了更好的用户体验，支持移动设备，并且减少了依赖JavaScript库的需求。

日期选择控件 <input type="date">

type="date" 控件允许用户选择日期，显示为年、月、日的格式。不同浏览器可能呈现不同的样式，但功能一致。

<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday">

属性扩展

• min/max：限制可选日期范围
• step：设置日期跳步（如step="7"表示按周选择）
• value：设置默认值（格式必须为YYYY-MM-DD）

<input type="date" min="2023-01-01" max="2023-12-31" step="7">

时间选择控件 <input type="time">

type="time" 提供24小时制的时间选择器，部分浏览器会显示AM/PM切换。

<label for="meeting-time">会议时间：</label>
<input type="time" id="meeting-time" name="meeting-time" value="09:00">

时间精度控制

通过step属性可设置分钟间隔：

<!-- 每15分钟一个选项 -->
<input type="time" step="900">  <!-- 900秒=15分钟 -->

<!-- 精确到秒 -->
<input type="time" step="1">

日期时间组合控件

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

这个控件组合了日期和时间选择，但不包含时区信息：

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

月份选择 <input type="month">

专门用于选择年和月：

<input type="month" id="start-month" name="start-month">

周选择 <input type="week">

显示年+周数的格式（ISO周数）：

<input type="week" id="week-select" name="week-select">

样式自定义与兼容处理

虽然原生控件方便，但样式受限。可通过以下方式增强：

伪元素定制

/* 针对Webkit浏览器 */
input[type="date"]::-webkit-calendar-picker-indicator {
  background: url(calendar-icon.png);
  padding: 0;
  margin: 0;
}

特性检测与回退方案

if (!Modernizr.inputtypes.date) {
  // 加载polyfill或显示普通文本输入框
  $('input[type="date"]').datepicker();
}

数据格式处理

获取与设置值

const dateInput = document.getElementById('birthday');
console.log(dateInput.valueAsDate);  // 返回Date对象
console.log(dateInput.valueAsNumber); // 返回时间戳

// 通过Date对象设置值
const now = new Date();
dateInput.valueAsDate = now;

表单提交格式

表单提交时，日期控件值会转换为字符串格式：

• date → "YYYY-MM-DD"
• time → "HH:MM"
• datetime-local → "YYYY-MM-DDTHH:MM"

移动端优化

移动设备会自动显示适合触摸操作的界面：

• iOS显示滚轮选择器
• Android显示日历式弹窗
• 键盘输入时自动显示数字键盘

<!-- 禁止移动端自动显示特殊键盘 -->
<input type="date" inputmode="none">

验证与约束

内置验证功能可检查日期范围：

<input type="date" required min="2023-01-01" max="2023-12-31">

通过CSS反馈验证状态：

input:invalid {
  border-color: red;
}
input:valid {
  border-color: green;
}

国际化考虑

不同地区的日期格式差异：

• 使用lang属性声明语言
• 某些浏览器会根据系统语言自动调整格式

<input type="date" lang="fr-FR">

实际应用示例

完整的预约表单示例：

<form id="appointment-form">
  <fieldset>
    <legend>预约信息</legend>
    
    <div>
      <label for="appointment-date">日期：</label>
      <input type="date" id="appointment-date" 
             min="2023-06-01" required>
    </div>
    
    <div>
      <label for="appointment-time">时间：</label>
      <input type="time" id="appointment-time"
             min="09:00" max="18:00" step="1800" required>
    </div>
    
    <div>
      <label for="reminder">提醒时间：</label>
      <input type="datetime-local" id="reminder"
             step="3600">
    </div>
  </fieldset>
  
  <button type="submit">提交预约</button>
</form>

<script>
  document.getElementById('appointment-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    console.log(Object.fromEntries(formData));
  });
</script>

浏览器支持现状

现代浏览器基本支持这些控件：

• Chrome/Edge ≥ 20
• Firefox ≥ 57
• Safari ≥ 14.1
• iOS Safari ≥ 5
• Android Browser ≥ 4.4

对于旧版IE浏览器，需要polyfill方案：

<!-- 加载datepicker polyfill -->
<script src="https://cdn.jsdelivr.net/npm/date-input-polyfill@2.14.0/dist/date-input-polyfill.min.js"></script>
<link rel="stylesheet" href="date-input-polyfill.css">

性能考量

原生控件相比JavaScript方案的优势：

• 不依赖外部库
• 移动端性能更好
• 自动继承系统偏好（如黑暗模式）
• 更少的内存占用

测试表明，原生日期选择器的初始化速度比主流日期选择库快3-5倍。