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

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

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

无法更改格式

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

电汇格式

所述HTML5 日期输入规范是指RFC 3339 规范，它指定一个全日期格式等于： yyyy-mm-dd 。有关更多详细信息，请参见 RFC 3339 规范的5.6 节。

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

简报格式

浏览器在输入日期的方式上不受限制。在撰写本文时，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 显示语言。我怀疑其他浏览器也是如此，尽管我无法对此进行验证。

自从提出此问题以来，Web 领域发生了很多事情，最令人激动的事情之一就是Web 组件的登陆。现在，您可以使用适合您需要的自定义 HTML5 元素优雅地解决此问题。如果您想覆盖 / 更改任何 html 标签的工作原理，则可以使用shadow dom 进行构建。

好消息是，已经有很多样板可以使用，因此您很可能不需要从头开始提出解决方案。只需检查人们正在建设什么，然后从那里获取想法。

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

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

或者您也可以发挥创意和弹出完整的日期拾荒者风格如你所愿，用格式化和你的愿望语言环境，回调，和你长的选项列表（你有在您的处置整体定制 API！）

符合标准，没有黑客。

仔细检查可用的 polyfills ，它们支持哪些浏览器 / 版本，以及它是否覆盖了您的用户群的足够百分比…… 是 2018 年，因此它肯定会覆盖大多数用户。

希望能帮助到你！

如前所述，正式不可能更改格式。但是可以对字段进行样式设置，因此（在 JS 的帮助下）它将以我们期望的格式显示日期。这样就失去了一些操作日期输入的可能性，但是如果强制采用格式的愿望更大，则可以采用这种解决方案。日期字段仅保留如下形式：

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

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

$("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 上都会失败。

协慌网