在所有主流浏览器中均忽略placeholder属性，因HTML规范明确禁止其支持；应使用label关联+CSS模拟占位，或JS动态切换type（不推荐）。
HTML <input type="date"> 为什么不能用 placeholder？
直接说结论：<input type="date"> 在所有主流浏览器中都**忽略 placeholder 属性**，设了也不显示。这是 HTML 规范明确规定的——date、time、datetime-local 等原生日期控件不支持 placeholder，因为浏览器会自行渲染日期格式（如 YYYY-MM-DD），且输入框内始终显示有效日期值（哪怕用户还没选，也会默认为当前系统日期或空字符串但 UI 强制占位）。
替代方案：用 label + CSS 模拟占位效果
最稳妥、无障碍友好、无需 JS 的方式是把提示文字放在 <label></label> 中，并通过 CSS 控制视觉位置。关键点：
-
<label></label>必须用for关联id，确保点击文字也能聚焦输入框 - 避免用
position: absolute盖在输入框上——会导致屏幕阅读器误读或焦点顺序错乱 - 推荐将提示文字作为
<label></label>的一部分，样式微调使其看起来像“内置提示”
<label for="birth-date">出生日期（请选择）</label> <input type="date" id="birth-date" name="birth-date">
再加一点 CSS 让它更紧凑：
label[for="birth-date"] {
display: block;
font-size: 0.875rem;
color: #666;
margin-bottom: 0.25rem;
}
如果非要“输入框内显示提示”，得用 JS 动态控制
注意：这不是真正意义上的 placeholder，而是靠 JS 拦截交互、伪造状态。风险高，仅限必须兼容老旧设计稿的场景：
立即学习“前端免费学习笔记（深入）”；
- 监听
focus和blur，在无值时显示灰色提示文本（需临时改type为text，否则日期控件 UI 不允许自由输入） - 用户点击后立刻切回
type="date"，否则无法唤起原生日期选择器 - 必须处理表单提交前校验——因为
type="text"状态下value是字符串，不是合法日期 - 移动端 Safari 对
type="date"切换type支持不稳定，可能白屏或不唤起键盘
简单示意（不推荐生产环境直接用）：
<input type="date" id="js-date" name="date">
<script>
const el = document.getElementById('js-date');
el.addEventListener('focus', () => {
if (!el.value) {
el.type = 'text';
el.value = '请选择日期';
el.style.color = '#999';
}
});
el.addEventListener('blur', () => {
if (el.value === '请选择日期') {
el.value = '';
el.type = 'date';
}
});
</script>
别踩坑：用 title 属性不是好主意
title 虽然能在 hover 时弹出提示，但它：
- 只在鼠标悬停触发，对触屏设备无效
- 延迟出现、样式不可控、内容会被截断
- 屏幕阅读器会把它当作辅助说明朗读，和实际功能无关时反而造成混淆
- 不符合 WCAG 2.1 关于“可感知性”的要求（提示应始终可见或可通过键盘访问）
真要加额外说明，用 <small></small> 或 <span class="hint"></span> 放在输入框下方更可靠。
原生 date 输入框的“提示”本质是 UX 层面的设计问题，不是属性缺失。强行塞进 placeholder 或用 title 敷衍，往往让表单更难用。重点该放在 label 清晰、错误反馈及时、空状态有明确引导——而不是执着于那个看不见的灰色字。
