input type="date" 的 placeholder 不起作用是因为浏览器规范明确忽略该属性，其提示文案由系统本地化决定，无法通过 HTML 直接覆盖；需用 label、aria-describedby 和 setCustomValidity 等外围方案实现多语言提示与校验。
input type="date" 的 placeholder 为什么不起作用
因为浏览器完全忽略 placeholder 属性——它对 type="date" 是无效的。你写 <input type="date" placeholder="请选择日期">，页面上永远看不到那段文字。这不是 bug，是规范行为：原生日期控件的提示文案由操作系统和浏览器本地化设置决定，HTML 层无法覆盖。
能改的只有外围文案，比如 <label> 或额外加的说明元素。实际做法是：
- 用
navigator.language检测当前语言（如"zh-CN"或"en-US"） - 动态设置
label.textContent和关联的提示元素（如small#date-hint） - 用
aria-describedby把提示 ID 绑定到 input 上，确保屏幕阅读器也能读到 - 避免把翻译塞进
title属性——hover 才显示，语义错、无障碍支持差
如何让“请选择生日”这类提示真正随语言切换
原生 type="date" 控件本身不提供可编程的默认提示文案，所以必须靠外部 DOM 元素承载多语言文本。常见结构是：
<label for="birth">出生日期</label> <input type="date" id="birth" name="birth" aria-describedby="birth-hint"> <small id="birth-hint">请选择出生日期</small>
关键点在于：
立即学习“前端免费学习笔记（深入）”；
-
aria-describedby必须指向一个真实存在的元素 ID，且该元素内容要随语言实时更新 - 不要只改
innerText，还要确保该元素在 DOM 中始终存在（避免 JS 错误导致缺失） - 如果使用服务端渲染，建议把语言标识（如
data-lang="zh"）提前注入 body，避免 JS 还没执行时出现语言错乱 - iOS Safari 下弹出面板的语言强制跟随系统，哪怕网页设为英文，面板里仍是“年/月/日”，这点无法绕过
required 校验失败时的提示语能国际化吗
不能直接改。浏览器对 required 触发的默认提示（如“请填写此字段”）也是由系统语言决定，JS 无法拦截或替换它。但你可以用 setCustomValidity() 覆盖整个校验链：
监听 invalid 事件，在里面根据语言设置自定义文案：
const dateInput = document.getElementById('birth');
dateInput.addEventListener('invalid', e => {
e.preventDefault();
if (dateInput.validity.valueMissing) {
dateInput.setCustomValidity('请选择出生日期');
} else {
dateInput.setCustomValidity('');
}
});
dateInput.addEventListener('input', () => {
dateInput.setCustomValidity('');
});
注意：
- 必须在
input事件中清空自定义提示，否则错误状态会残留 -
setCustomValidity('')不等于“通过校验”，只是解除自定义阻断；原生required仍起作用 - 如果用户没触发 submit，仅靠 focus/blur 不会激活
invalid事件，得靠表单提交或手动调用checkValidity()
为什么 iOS 上无论如何都切不了日期面板的语言
因为 iOS Safari 的日期选择器面板文案（“年/月/日”、“取消”、“完成”）完全绑定设备系统语言，不响应网页的 lang 属性、hreflang、CSS direction，甚至 JS 设置 document.documentElement.lang 也无效。
这意味着：
- 如果你的产品要求全站语言统一（比如英文界面但用户手机是中文系统），这个面板一定会显示中文
- 测试时必须真机验证，模拟器或 Chrome DevTools 的 UA 切换无法复现该行为
- 没有 polyfill、没有 CSS hack、没有 JS 注入能改它——这是 WebKit 强制行为
- 唯一可控出口是：在 label 或旁边提示文字里明确写“Date format: YYYY-MM-DD”，降低用户理解成本
真正需要强控 UI 文案的场景，得放弃原生控件，换 flatpickr、van-calendar 等可定制方案。原生 type="date" 的国际化，本质是“外围文案 + 用户教育”，不是“控件内文案替换”。
