min 和 max 属性必须用 yyyy-mm-dd 格式，否则无效；value 属性设默认值时必须是字符串；datetime-local 的 value 必须含大写 t 且不支持时区；原生日期控件样式不可靠，应优先使用逻辑控制和语义化标记。
min 和 max 属性必须用 YYYY-MM-DD 格式，否则无效
这两个属性只接受严格符合 ISO 8601 的日期字符串，比如 2026-09-03。写成 2026/09/03、09-03-2026 或带时间的 2026-09-03T00:00，浏览器会直接忽略该属性，不报错但也不生效。
常见错误场景：
- 后端模板拼接时漏了补零，如把 2026-9-3 当作
min值 → 实际被忽略 - 从 JS Date 对象调用
.toDateString()获取字符串 → 返回类似Wed Sep 03 2026，完全不能用 - 用户输入的日期字符串未经格式化就塞进
min→ 表单逻辑失控
推荐做法：用 toISOString().slice(0, 10) 或 new Intl.DateTimeFormat('sv').format(date) 生成标准格式。
value 属性设默认值时，必须是字符串，不能是 Date 对象
input type="date" 的 value 只认字符串，JS 赋值时如果直接写 el.value = new Date()，结果是空字符串或 Invalid Date —— 浏览器不会自动转换。
正确方式只有两种：
- 服务端渲染时，直接在 HTML 中写死：
<input type="date" value="2026-09-03"> - 前端 JS 设置时，先转成标准格式：
el.value = new Date().toISOString().slice(0, 10)
注意：valueAsDate 是只读属性，不能用来设值；valueAsNumber 返回毫秒数但依赖本地时区，不可靠。
datetime-local 的 value 必须含 T 分隔符，且不支持时区偏移
type="datetime-local" 的合法 value 是 2026-09-03T18:00 这种格式，中间必须有大写 T，不能用空格或小写 t。写成 2026-09-03 18:00 或 2026-09-03t18:00，输入框会显示为空。
更关键的是：它完全不支持时区信息。哪怕你传 2026-09-03T18:00+08:00，浏览器会截断为 2026-09-03T18:00，并按用户本地时区解释这个时间。这意味着，同一份 HTML 在东京和旧金山打开，选中相同 value，实际代表的 UTC 时间完全不同。
如果你需要跨时区一致的时间语义，必须在 JS 中手动处理：new Date(el.value + 'Z').toISOString() 是常见但有风险的做法，需确认用户是否在夏令时切换边缘。
移动端和桌面端渲染行为差异大，别依赖 CSS 伪元素样式
Chrome 桌面版允许用 ::webkit-inner-spin-button 隐藏上下箭头，Safari 完全不支持；Firefox 对 input[type=date] 的伪类支持几乎为零。所有试图用 CSS 改变日历弹出位置、按钮图标、字体大小的操作，在至少一个主流浏览器里会失效。
真正可控的只有三件事：
- 用
min/max控制可选范围（逻辑层） - 用
required触发原生校验提示（交互层） - 用
label[for]绑定文字提升点击区域和无障碍支持（语义层）
想统一 UI？别硬改原生控件。要么降级为文本框 + JS 库（如 flatpickr），要么接受“不同设备看起来不一样”这个事实 —— 原生控件的优势恰恰在于它尊重系统习惯，而不是强行统一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
