如何隐藏HTML <input type="datetime-local">的时间部分并显示非美式日期？

首先明确说：没办法直接移除或隐藏<input type="datetime-local">的时间部分——这个控件的设计初衷就是让用户同时选择日期和时间，它的UI和交互逻辑都是围绕这个功能做的，原生没有提供只显示日期的选项。

不过你的核心需求其实是「得到一个显示dd/mm/yyyy格式的日期选择器」，而不是必须用datetime-local控件对吧？那我们有几个更靠谱的解决方案：

1. 正确配置原生<input type="date">的本地化 #

你提到用<input type="date">显示美式格式，这其实是因为浏览器默认遵循了用户系统的区域设置，但我们可以通过设置页面或控件的lang属性来强制指定显示格式。

比如如果你需要欧洲式的dd/mm/yyyy，可以给输入框加上对应地区的语言属性：

<!-- 英国地区格式 -->
<input type="date" lang="en-GB">
<!-- 西班牙地区格式 -->
<input type="date" lang="es-ES">
<!-- 法国地区格式 -->
<input type="date" lang="fr-FR">

这样Chrome会根据你设置的lang值来渲染日期格式，比如en-GB就会显示dd/mm/yyyy，完全符合你的需求。而且原生控件的体验更好，不需要额外引入第三方库。

2. 不推荐：用CSS hack隐藏datetime-local的时间部分 #

如果你非要用<input type="datetime-local">，只能通过WebKit的伪元素来隐藏时间相关的部分，但这个方法兼容性极差，只对Chrome、Safari这类WebKit内核的浏览器有效，Firefox和旧版Edge完全不支持。而且用户点击控件时，还是会弹出时间选择器，体验很割裂。

示例CSS代码：

/* 隐藏Chrome中datetime-local的时间视觉部分 */
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field,
input[type="datetime-local"]::-webkit-datetime-edit-time-zone-field {
  display: none;
}

注意：这种方法连你想要的「只显示dd/mm/yyyy水印」都做不到，因为内置水印是浏览器生成的，没法通过CSS修改，只能隐藏时间的视觉部分，水印还是会有--:--的部分，所以真的不推荐用这个方案。

3. 自定义格式：使用第三方日期选择器库 #

如果需要完全自定义日期格式，不受浏览器和系统设置限制，最好的选择是用第三方日期选择器库，比如Flatpickr、jQuery Datepicker这些。它们可以让你精确控制显示的格式，而且兼容性更好。

以Flatpickr为例，只需要简单配置就能实现dd/mm/yyyy的显示：

<input type="text" id="datePicker">

<script src="flatpickr.min.js"></script>
<link rel="stylesheet" href="flatpickr.min.css">
<script>
flatpickr("#datePicker", {
  dateFormat: "d/m/Y", // 指定显示格式为日/月/年
  enableTime: false, // 不启用时间选择
  placeholder: "dd/mm/yyyy" // 自定义水印文本
});
</script>

这样就能得到一个完全符合你需求的日期选择器，所有显示细节都能自己把控。

总结 #

优先推荐方案1：给<input type="date">设置正确的lang属性，这是最原生、体验最好的方式；如果需要更灵活的自定义，就用方案3的第三方库；方案2的CSS hack尽量不要用，兼容性和体验都很差。

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