为什么Chrome和Firefox在en-GB区域下<input type='date'>使用mm/dd/yyyy格式？

不一致的核心原因 #

• 首先HTML规范没有对<input type="date">的用户可见展示/输入格式做强制约束，仅要求该控件最终提交的表单值为yyyy-MM-dd格式的ISO标准值，展示逻辑完全由浏览器厂商自行实现。
• 当前Chrome、Firefox桌面版的原生日期控件，会优先读取操作系统层面的短日期格式配置，而非浏览器自身的语言/区域设置。你测试时观测到en-GB环境下控件显示mm/dd/yyyy，本质是你测试设备的系统默认短日期格式就是mm/dd/yyyy，和浏览器语言设置为en-GB没有关联；而Intl.DateTimeFormat是严格按照浏览器的区域配置输出格式，所以才会出现两者不一致的问题。

常见规避方案 #

针对你担心的用户混淆问题，业内通常有两种处理方案：

• 替换原生日期输入控件为前端组件库的日期选择器：目前主流组件库的日期组件都支持和Intl规则对齐的区域化配置，可以保证站点内输入、输出的日期格式完全统一。
• 保留原生控件的前提下补充提示：可以在日期输入控件旁标注清楚当前要求的输入格式，或者将Intl.DateTimeFormat输出的日期示例放在控件附近，降低用户的理解成本。

内容的提问来源于stack exchange，提问作者scott