input type="date" 的 value 必须为严格 yyyy-mm-dd 字符串，js 应用 toisostring().split('t')[0] 初始化，绑定时传字符串而非 date 对象，min/max 仅限边界不可禁特定日，value 始终是字符串需显式转 date，表格中需设宽并降级兼容。
input type="date" 的 value 必须是 YYYY-MM-DD 格式
浏览器只认 YYYY-MM-DD 字符串，其他格式（如 2026/09/06、06-09-2026、2026-9-6）会被静默忽略，输入框显示为空。后端吐数据或 JS 动态赋值时，必须确保字符串严格合规。
- JS 初始化推荐用：
new Date().toISOString().split('T')[0]（可靠，不依赖本地时区） - 避免用
toLocaleDateString()或拼接字符串，容易漏补零 - Vue/React 中绑定
v-model或value时，务必传字符串而非Date对象，否则在 Safari 中可能不更新
min/max 限制日期范围但不能禁用中间某天
min 和 max 只控制可选边界，无法跳过节假日、周末或自定义禁用日。比如设了 min="2026-09-06"，用户仍能选 9 月 7 日、8 日……但不能选 5 日及之前。
- 想禁用特定日期（如周末、节假日），原生控件做不到，必须换 JS 日历库（如 flatpickr、@mantine/dates）
- 仅设
min不设max：过去日期锁定，未来全开；反之亦然 - 动态更新
min（如“结束日期 ≥ 开始日期”）需监听change事件并手动赋值：endInput.min = startInput.value
获取的 value 是字符串，不是 Date 对象
很多人以为 input.value 返回的是 Date 实例，实际永远是 "2026-09-06" 这样的字符串。直接调 .getFullYear() 会报错。
- 需要计算或比较时，必须显式转换：
new Date(input.value)（注意：它按本地时区解释为当日 00:00:00） - 若需 UTC 时间，别用
valueAsNumber（结果受用户时区影响），改用new Date(input.value + 'T00:00:00Z') - 表单提交前校验日期有效性？正则只能验格式，还得用
isNaN(new Date(input.value).getTime())排除无效组合（如2026-02-30）
表格中嵌入 date 输入框要手动调宽和降级
直接往 <td> 里放 <code><input type="date"> 可行，但默认宽度太窄，且旧版 Safari / IE 完全不支持。
- 必加样式：
style="width: 120px; box-sizing: border-box;"，否则日期显示被截断（如只看到2026-09…） - 兼容性检测建议：
const isDateSupported = 'type' in document.createElement('input') && document.createElement('input').type === 'date'; - 不支持时 fallback 到
type="text"，并加pattern="\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])"和 JS 校验，否则用户可能输abc或2026-13-01
input type="date" 看似简单，但 value 格式、时区隐含行为、表格布局适配、跨浏览器降级这四点，任何一个没踩准都会导致日期错乱或交互失效——尤其在金融、医疗等对时间精度敏感的场景，宁可多写几行 JS 校验，也别信“浏览器自动处理”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
