原生 input[type="date"] 的 value 必须为 YYYY-MM-DD 格式，这是 HTML 规范强制要求；中文显示需通过 Date 对象调用 toLocaleDateString('zh-CN', options) 实现，提交时仍使用原生 value 值。
原生 input[type="date"] 无法显示中文格式（如“2024年3月15日”），它只接受并显示 YYYY-MM-DD 字符串；所谓“中文格式化”，只能发生在视图层展示或提交前转换，不能改变输入框内部值。
为什么 input[type="date"] 的 value 必须是 YYYY-MM-DD
浏览器强制将 input[type="date"] 的 value 属性标准化为 ISO 8601 格式（如 "2024-03-15"），这是 HTML 规范行为。无论用户看到的界面是“2024/3/15”还是“15/03/2024”，其 DOM 值永远是纯字符串 "YYYY-MM-DD"。
常见错误现象：
- 把数据库返回的
"2024-03-15T08:30:00Z"直接赋给value→ 输入框为空 - 用后端模板注入
"15/03/2024"→ 浏览器解析失败，显示占位符 - 试图在 Vue 中绑定
v-model="chineseDate"并设为"2024年3月15日"→ 输入框变空或报错
如何安全地将 value 转成中文格式用于展示
必须先转成 Date 对象，再用 toLocaleDateString() 或 Intl.DateTimeFormat 格式化。直接对字符串调用 toLocaleDateString() 会报错。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
const input = document.getElementById('birth_date');
const date = new Date(input.value); // 注意：Safari 旧版可能不支持 "2024-03-15"，稳妥写法是 new Date(input.value + 'T00:00')
const cnDate = date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric'
}); // → "2024年3月15日"
关键点：
- 不要只传
'zh-CN'，不带options时各浏览器默认格式不一致（Chrome 可能出"2024/3/15"） -
weekday: 'long'在 iOS Safari 15.4 之前不支持，慎用 - 若需固定格式如
"15/03/2024"，别硬凑toLocaleDateString()，改用字符串拼接：${d.getDate()}/${d.getMonth()+1}/${d.getFullYear()}
表单提交前如何把中文展示值转回标准格式
不需要——提交时浏览器自动用 input.value（即 YYYY-MM-DD）发送，你看到的“中文格式”只是页面上额外渲染的文本，和提交数据无关。
但如果你在提交前做了自定义格式转换（比如把用户选的日期拼成 "20240315" 给后端），注意：
- 别修改
input.value，否则破坏原生控件行为 - 应在
form.addEventListener('submit', ...)中读取input.value，再手动转换：input.value.replace(/-/g, '') - 后端接收的是字符串，不是时间戳，别误当数字或
Date对象处理
Element Plus 等第三方组件的中文切换逻辑不同
像 el-date-picker 这类组件不依赖原生 input[type="date"]，它的语言切换靠引入 locale 包，例如：
<script type="module">
import zhCn from './zh-cn.mjs';
import { ElDatePicker } from 'element-plus';
// 注册中文 locale
</script>
这和原生控件互不干扰——原生控件永远是 YYYY-MM-DD，第三方组件可自由控制显示与 value 格式。混用时尤其注意：不要把 el-date-picker 的中文显示值反向赋给原生 input 的 value。
最易被忽略的一点：所有格式化操作都发生在 JavaScript 层，input[type="date"] 自身没有“格式化能力”，它的 value 是只读规范字符串，任何想绕过这个约束的尝试，都会导致控件失效或兼容性问题。
