HTML date输入类型如何实现日期选择功能？
- 内容介绍
- 文章标签
- 相关推荐
本文共计783个文字，预计阅读时间需要4分钟。
为什么 value 必须是 YYYY-MM-DD，且不能靠 setAttribute 赋值
浏览器只认 value 属性的 DOM 值，不是 HTML 属性。写 <input type="date" value="2024/05/10"> 或用 setAttribute('value', '2024/05/10') 都会失效——输入框显示为空或报验证失败。
- 正确做法：直接赋值
input.value = '2024-05-10' - 从后端取日期时，先标准化：
new Date(dateStr).toISOString().split('T')[0] - 空值初始化别写
value=""，留空即可；否则某些浏览器会触发required校验失败
min/max 有效但不阻止手动输入非法值
min 和 max 只限制日历面板可选范围，用户仍可手动输入（比如粘贴）超限日期，如 "1919-01-01"，此时 input.checkValidity() 会返回 false，但不会自动拦截。
本文共计783个文字，预计阅读时间需要4分钟。
为什么 value 必须是 YYYY-MM-DD，且不能靠 setAttribute 赋值
浏览器只认 value 属性的 DOM 值，不是 HTML 属性。写 <input type="date" value="2024/05/10"> 或用 setAttribute('value', '2024/05/10') 都会失效——输入框显示为空或报验证失败。
- 正确做法：直接赋值
input.value = '2024-05-10' - 从后端取日期时，先标准化：
new Date(dateStr).toISOString().split('T')[0] - 空值初始化别写
value=""，留空即可；否则某些浏览器会触发required校验失败
min/max 有效但不阻止手动输入非法值
min 和 max 只限制日历面板可选范围，用户仍可手动输入（比如粘贴）超限日期，如 "1919-01-01"，此时 input.checkValidity() 会返回 false，但不会自动拦截。