原生时间输入控件需在表单submit事件中用formdata读取，避免空值；chrome/firefox的datetime-local返回“yyyy-mm-ddthh:mm”格式字符串；safari对time需监听input事件；ie等不支持时应检测后降级；服务端必须校验格式，value为字符串须转date并注意时区。
原生 <input type="date">、<input type="time"> 和 <input type="datetime-local"> 能直接采集结构化时间数据，但必须配合正确的表单提交逻辑和值读取时机，否则拿到的往往是空字符串或格式错误的字符串。
为什么直接读 value 常常为空？
常见错误是页面加载后立刻执行 document.getElementById('myTime').value，此时用户还没操作，值自然为空；更隐蔽的问题是监听了 click 或 change 事件但没判断是否已选值，导致提交时仍取到空串。
- 确保在表单
submit事件中读取，而不是在按钮click中 —— 否则用户按回车提交会绕过逻辑 - 对
type="datetime-local"，Chrome/Firefox 返回形如"2026-10-02T11:39"的字符串，没有秒和时区，别假设它带Z或本地时区偏移 -
type="time"在 Safari 中可能不触发change事件（仅聚焦失焦），建议同时监听input事件
如何用 FormData 正确提取并提交？
FormData 是最稳妥的方式：它自动忽略未填写的时间控件，且兼容所有现代浏览器，不需要手动拼接字符串或做空值校验。
- HTML 中必须为每个
input设置name属性，例如<input type="date" name="start_date"> - JavaScript 中在
submit事件里创建实例：const data = new FormData(formElement) - 可直接传给
fetch：fetch('/api', { method: 'POST', body: data })，服务端收到的就是标准表单字段 - 若需转成 JSON 发送，得手动提取：
{ start_date: form.start_date.value }，注意检查.value是否非空
兼容性与 fallback 处理要点
IE 完全不支持这三类时间控件，部分旧版 Android WebView 对 datetime-local 渲染异常 —— 不能只靠 CSS 隐藏/显示 fallback，而要检测支持性再决定渲染策略。
- 用
document.createElement('input').type = 'datetime-local'检测，返回"datetime-local"才表示支持 - 不支持时，可降级为两个分离的
date+time控件，或引入轻量级 JS 库（如 flatpickr），但避免 jQuery 插件增加体积 - 服务端必须校验时间格式，不能信任前端传来的
value字符串 —— 例如"2026-13-02"在某些浏览器中也能通过required校验
最容易被忽略的是：时间控件的 value 始终是字符串，不是 Date 对象；想做计算必须手动 new Date(value)，且要注意 datetime-local 字符串不含时区，构造出的 Date 对象默认按本地时区解析，跨时区场景下务必补上时区偏移处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
