是否可以重载 HTMLInputElement 来为其提供不同的语言环境？请在此处查看我的问题：

添加了使用操作系统区域设置显示日期的选项，请查看我的答案。我知道这并不能解决根本问题，但对于开发人员来说，这是一个不错的选择。

无法改变格式

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

线路格式

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

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

演示格式

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

桌面设备

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

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

移动设备

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

@AllanKimmerJensen 不过我理解你的想法。我认为使用 RFC3339 中指定的格式的决定是正确的，因为它不会在 HTML 和 JavaScript 之间产生耦合。至于你的第二点，我认为从可用性的角度来看，让用户根据自己的区域偏好查看日历是有意义的。

如果应用程序是 pt_BR，我希望有一个 pt_BR 输入。我的系统设置无关紧要。HTML5 需要某种方式来强制执行语言环境。

我使用西班牙语区域设置日期/货币，因为我住在西班牙，但我的母语是英语，而且我习惯使用美国键盘布局，所以我使用英语/美国键盘。我的客户是讲法语的欧洲人……我希望我可以提示 Chrome 等停止以美国 mm-dd-yyyy 格式显示日期！

现在可以从“设置”面板中将显示格式设置为与 Firefox 中的操作系统区域设置相匹配，请查看我的回答以了解详细信息。Chrome 现在应该（或可以）添加此选项。

自从这个问题被提出以来，网络领域发生了不少事情，其中​​最令人兴奋的事情之一就是 网络组件 自定义 HTML5 元素 来优雅地解决此问题 。如果您希望覆盖/更改任何 html 标签的工作原理，只需使用 shadow dom .

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

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

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

或者您可以发挥创意，弹出完整的日期选择器， 按照您的意愿设置样式 ，并带有您想要的格式和语言环境、回调和一长串选项（您可以使用整个自定义 API！）

符合标准，无黑客攻击。

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

希望有帮助！

但这些功能可以本地化吗？例如，将月份名称更改为非英语。它们可以在桌面和移动设备上使用吗？

当然，它们是可本地化的。您可以利用系统的语言环境（即：is.gd/QSkwAY）或在 webcomponent 中提供您的 i18n 文件（即：is.gd/Ru9U82）。至于移动浏览器，它们使用 polyfill 得到支持，尽管还不是 100%（目前）……请查看我发布的浏览器/版本链接。同样，这是前沿技术。如果您具有前瞻性，这是一个很好的解决方案。

抱歉，我没有看到您的最新评论。这个：jcrowther.io/2015/05/11/i18n-and-web-components 看起来非常有用，应该包含在答案中。

尽管有 100 多人显然不同意，但在我看来，这个答案似乎没有增加任何有用的东西。没有给出为什么 Web 组件（而不是为网页创建可重复使用的小部件的任何其他方式）应该是这里的首选解决方案的理由，至少提出的第一个组件有点垃圾（没有日历弹出窗口，如果我输入了太大的数字，例如日期，就会出现一些疯狂的行为）。此外，您实际上从未展示过如何使用任何建议的组件设置自定义日期格式，这意味着这最终并没有回答所提出的问题。

如前所述，官方无法更改格式。但是可以设置字段的样式，这样（借助一些 JS 帮助）它就会以我们想要的格式显示日期。这种方式会失去一些操纵日期输入的可能性，但如果强制格式的愿望更大，这种解决方案可能是一种方法。日期字段仅保持如下状态：

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

其余的是一些 CSS 和 JS： http://jsfiddle.net/g7mvaosL/

注意：如果要自定义显示格式，只需更改 data-date-format 上的属性 input 。不要更改 YYYY-MM-DD 传递给 moment .

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
            .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")

input {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

它在桌面版 Chrome 和 iOS 版 Safari 上运行良好（尤其受欢迎，因为在我看来，触摸屏上的原生日期操纵器是无与伦比的）。没有检查其他版本，但不要指望它会在任何 Webkit 上失败。

很好的例子，但它在 iOS (10.0) 上不太适用。虽然功能可用，但样式不对。

如果像 Chrome 这样的现代浏览器支持 CSS 内容 atrr 语法，那就太好了

区分两种不同的格式很重要 :

• RFC 3339/ISO 8601 \“有线格式\”：YYYY-MM-DD。根据 HTML5 规范，这是在表单提交或通过 DOM API 请求时必须用于输入值的格式。它与语言环境和地区无关。
• 用户界面控件显示并接受为用户输入的格式。鼓励浏览器供应商遵循用户的偏好选择。例如，在 Mac OS 上，如果在“语言和文本”偏好设置窗格中选择了“美国”区域，Chrome 20 将使用“m/d/yy”格式。

HTML5 规范不包含任何覆盖或手动指定格式的方法。

W3C 每十年添加一个新控件，但他们没有考虑不同的显示区域...我真的很想在那里工作，无所事事就能得到报酬！

我找到了一种改变格式的方法，这是一种棘手的方法，我只是使用 CSS 代码改变了日期输入字段的外观。

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;
}

input[type="date"]::-webkit-datetime-edit-year-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 26px;
}


input[type="date"]::-webkit-datetime-edit-day-field{
  position: absolute !important;
  color:#000;
  padding: 2px;
  left: 4px;
  
}

<input type="date" value="2019-12-07">

它在 Firefox 浏览器中不起作用。有没有办法通过 CSS 处理在 Firefox 中有效的日期格式？