HTML 日期输入：value、min、max、step 与日期格式

HTML <input type="date"> 提供用于年份、月份和日期的控件。其日历外观和显示顺序可能因浏览器和区域设置而异，但值和提交的值被标准化为 YYYY-MM-DD。它们不包括时间或时区。

设置初始日期和允许的范围

使用 value 指定初始日期，使用 min/max 指定允许的最早和最晚日期。两个边界均包括在内。属性需要有效的日期字符串，而不是诸如“2030年5月20日”的本地化显示文本。无效的最小值或最大值可能不会强制执行预期的限制。

name 是提交的字段名称，id 关联标签。使用 required 指定必填输入。范围不会使每个浏览器以相同方式阻止日期输入；直接输入超出范围的日期会导致约束验证失败。

完整示例：检查日期字符串及其有效性

将以下文档保存为 date-demo.html 并在浏览器中打开。它显示 2030 年 5 月中选择的日期以便练习，而不会进行预订或向服务器发送数据。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>检查日期输入值</title>
</head>
<body>
  <h1>访问日期练习</h1>
  <form id="demo">
    <label for="visit">访问日期（2030年5月，必填）</label>
    <input type="date" id="visit" name="visit"
           value="2030-05-20" min="2030-05-01" max="2030-05-31" step="1" required>
    <button type="submit">查看值</button>
    <button type="reset">重置</button>
  </form>
  <p id="result" aria-live="polite"></p>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = 'visit = ' + new FormData(form).get('visit');
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. 提交初始日期，显示：visit = 2030-05-20
2. 选择另一个五月的日期并提交以显示其日期字符串。超出范围的日期会被最小/最大验证阻止。
3. 清除日期并提交：必填验证会阻止它。重置会返回到 5 月 20 日。

step 单位是天，默认值为 1。在示例中仅将步长改为 7：以最小日期 5 月 1 日为基准，因此 5 月 1 日、8 日、15 日、22 日和 29 日符合间隔。最初的 5 月 20 日值不再适用。比较有效的 5 月 8 日选择，然后将步长恢复为 1 以允许每天选择。单一的步长设置无法实现包含周末或假期的工作日历。

显示格式、时区和服务器验证

不要在值中使用斜杠或本地化字符串来更改特定于地区的日期选择器。如果只需日历日期，将其视为字符串可以避免不必要的时区转换。需要时间的数据不仅需要日期，还需要单独的时区策略。

使用 CSS 控制宽度，而不是使用 size 属性。提供标签和范围说明，并在服务器端验证实际日期、闰年、范围以及对不支持的控件或绕过浏览器检查的请求的业务可用性。选择日期不会预订位置或查询服务器记录的当前可预约情况。MDN 日期输入参考 解释了属性规则。