HTML5 <input type="date"> 仅支持 YYYY-MM-DD 字符串格式，绑定 Date 对象会导致清空或显示异常；正确做法是用字符串字段（如 dateStr）配合计算属性实现双向转换，确保 DOM 同步与浏览器兼容性。
HTML5 的 <input type="date"> 本身不支持 Vue 的 v-model 双向绑定到 Date 对象，必须用字符串（YYYY-MM-DD）格式交互。
为什么 v-model 绑定 Date 对象会失效
浏览器原生 <input type="date"> 的 value 属性只接受并返回 ISO 格式字符串（如 "2024-06-15"），不是 Date 实例。Vue 的 v-model 会直接映射该 value，所以绑定 new Date() 或 date.toISOString().slice(0,10) 以外的值会导致输入框清空或显示 Invalid Date。
- 绑定
new Date()→ 输入框为空或显示异常 - 绑定
date.toLocaleDateString()→ 浏览器不识别非 ISO 格式，自动清空 - 绑定
date.toISOString()（含时间）→ 被截断为日期部分，但属冗余转换
正确写法：用字符串字段 + 计算属性封装转换
在 Vue 2/3 中，推荐用一个字符串响应式字段（如 dateStr）做 v-model，再通过计算属性提供 Date 接口：
// Vue 3 setup script 示例
const dateStr = ref('2024-06-15') // 必须是 'YYYY-MM-DD'
const date = computed({
get() {
return dateStr.value ? new Date(dateStr.value) : null
},
set(val) {
if (val instanceof Date && !isNaN(val.getTime())) {
dateStr.value = val.toISOString().slice(0, 10)
} else {
dateStr.value = ''
}
}
})
-
dateStr是唯一与 DOM 同步的字段，确保浏览器行为稳定 -
computed的set中必须校验val是否为有效Date，否则new Date(undefined)会生成无效日期 - 初始化时若无默认值，建议设为
''而非null，避免首次渲染报错
注意表单提交和后端交互的格式一致性
后端通常要求 YYYY-MM-DD 字符串，而非时间戳或带时区的 ISO 字符串。直接提交 dateStr.value 最安全：
立即学习“前端免费学习笔记（深入）”；
- 不要在提交前调用
date.value?.toISOString()—— 多余且可能引入时区偏移 - 如果后端需要时间戳，应在 API 请求层转换：
date.value?.getTime()，而不是在绑定层处理 - 使用
dateStr做表单验证（如required、min/max）最可靠，因为浏览器原生校验只认字符串值
真正容易被忽略的是：哪怕你用 dayjs 或 date-fns 封装了所有日期逻辑，<input type="date"> 的底层约束始终是字符串。绕过它强行绑定对象，只会让表单在某些浏览器（尤其是 Safari）中表现不一致。保持字段类型纯净，比“看起来更面向对象”更重要。
