有没有办法改变输入类型=“日期”格式？

Question

默认情况下，输入 type="date" 将日期显示为 YYYY-MM-DD 。

问题是，是否可以将其格式强制为： DD-MM-YYYY ？

原文由 Tural Ali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

改变格式是不可能的

我们必须区分在线格式和浏览器的表示格式。

有线格式

HTML5 日期输入规范 参考了 RFC 3339 规范，它指定了一个完整的日期格式等于： yyyy-mm-dd 。有关详细信息，请参阅 RFC 3339 规范的 第 5.6 节。

此格式由 value HTML 属性和 DOM 属性使用，并且是在进行普通表单提交时使用的格式。

演示格式

浏览器在显示日期输入的方式上不受限制。在撰写本文时，Chrome、Edge、Firefox 和 Opera 具有日期支持（请参阅 此处）。它们都显示日期选择器并在输入字段中格式化文本。

桌面设备

对于 Chrome、Firefox 和 Opera，输入字段文本的格式基于浏览器的语言设置。对于 Edge，它基于 Windows 语言设置。遗憾的是，所有网络浏览器都会忽略操作系统中配置的日期格式。对我来说，这是非常奇怪的行为，也是使用这种输入类型时需要考虑的事情。例如，将其操作系统或浏览器语言设置为 en-us 的荷兰用户将显示 01/30/2019 而不是他们习惯的格式： 30-01-2019

Internet Explorer 9、10 和 11 显示具有有线格式的文本输入字段。

移动设备

专门针对 Android 上的 Chrome，格式基于 Android 显示语言。我怀疑其他浏览器也是如此，尽管我无法验证这一点。

原文由 David Walschots 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

自从提出这个问题以来，web 领域发生了很多事情，其中最令人兴奋的事情之一就是 web 组件 的落地。现在，您可以使用专为满足您的需求而设计的 自定义 HTML5 元素 优雅地解决此问题。如果您想覆盖/更改任何 html 标签的工作方式，只需使用 shadow dom 构建您的标签即可。

好消息是已经有很多可用的样板文件，因此很可能您不需要从头开始想出解决方案。只需 检查 人们正在构建的内容并从中获取想法。

您可以从一个简单的（有效的）解决方案开始，例如聚合物的 datetime-input ，它允许您使用这样的标签：

  <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

或者您可以根据自己的喜好获得具有创意和弹出式的完整日期选择器 样式，具有您想要 的格式和区域设置、回调和您的长选项列表（您有一个完整的自定义 API 供您使用！）

符合标准，没有黑客。

仔细检查 可用的 polyfills ，它们支持哪些 浏览器/版本，以及它是否覆盖了足够多的用户群……现在是 2018 年，所以它很可能肯定会覆盖你的大部分用户。

希望能帮助到你！

原文由 sdude 发布，翻译遵循 CC BY-SA 4.0 许可协议