有什么方法可以更改输入type=“date”格式吗？

Question

我正在我的网页上使用HTML5元素。默认情况下，输入type="date"将日期显示为YYYY-MM-DD。

问题是，是否可以将其格式更改为类似：DD-MM-YYYY的格式？

Answer 1

无法更改格式

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

导线格式

HTML5 date input specification引用RFC3339 specification，它指定的完整日期格式等于：yyyy-mm-dd。有关详细信息，请参见rfc339规范的section 5.6。

演示文稿格式

浏览器在显示日期输入方面不受限制。在编写Chrome时，Edge、Firefox和Opera支持日期（参见here）。它们都显示一个日期选择器并在输入字段中格式化文本。

桌面设备

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

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

移动设备

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

Answer 2

自从这个问题被提出以来，web领域发生了很多事情，其中最令人兴奋的是web components的登陆。现在，您可以使用一个custom HTML5 element设计来满足您的需要，从而优雅地解决这个问题。如果您想重写/更改任何html标记的工作方式，只需使用shadow dom构建您的标记。

好消息是已经有很多样板可用，所以很可能您不需要从头开始提出解决方案。只是check人们在建什么，从那里得到想法。

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

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

或者，您可以使用创造性的弹出式完整日期选择器styled as you wish，其中包含您想要的格式和区域设置、回调和一长串选项（您可以使用整个自定义API！）

符合标准，无黑客攻击。

仔细检查一下available polyfills，他们支持什么browsers/versions，如果它覆盖了你的用户群的足够百分比……现在是2018年，那么它肯定覆盖了你的大部分用户。

希望有帮助！

Answer 3

如前所述，官方不可能更改格式。但是可以设置字段的样式，所以（有一点JS帮助）它以我们想要的格式显示日期。通过这种方式操作日期输入的一些可能性已经丢失，但是如果强制使用格式的愿望更大，那么这种解决方案可能是一种方法。日期字段仅保持如下状态：

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

剩下的是一些CSS和JS:http://jsfiddle.net/g7mvaosL/

它在Chrome桌面和iOS Safari上都能很好地工作（尤其是在触摸屏上的原生日期操纵器是无与伦比的IMHO）。没有检查其他人，但不要期望在任何Webkit上失败。