这是不可能改变web-kit浏览器使用用户的电脑或手机的默认日期格式。 但是如果你可以使用jquery和jquery UI，有一个日期选择器是可设计的，可以显示在任何格式的开发人员想要的。 jquery UI日期选择器的链接是 在这个页面http://jqueryui.com/datepicker/上，您可以找到演示以及代码和文档或文档链接

编辑:-我发现chrome使用的语言设置默认等于系统设置，但用户可以改变他们，但开发人员不能强迫用户这样做，所以你必须使用其他js解决方案，就像我告诉你可以搜索网页查询像javascript日期选择器或jquery日期选择器

如果你需要一个快速的解决方案，可以试试这个方法，让yyyy-mm-dd变成“dd- september -2016”

1)在您的输入附近创建一个span类(充当标签)

2)每次用户更改日期或需要从数据中加载时更新标签。

工作的webkit浏览器移动和指针事件的IE11+需要jQuery和jQuery日期

$("#date_input").on("change", function () { $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val())))); }); #date_input{text-indent: -500px;height:25px; width:200px;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <input id ="date_input" dateformat="d M y" type="date"/> <span class="datepicker_label" style="pointer-events: none;"></span>

const birthday = document.getElementById("birthday"); const button = document.getElementById("wishBtn"); 按钮。addEventListener("click"， () => { let dateValue = birthday.value; //改变格式:) dateValue = dateValue.split(“-”).reverse () . join(“-”); alert('生日快乐的国王/皇后${dateValue} '); })； <input type="date" id="birthday" name="birthday" value="2022-10-10"/> <button id="wishBtn">点击我</button>

浏览器从用户的系统日期格式中获取日期输入格式。

(在支持的浏览器中测试，Chrome, Edge。)

由于目前还没有由规范定义的标准来改变日期控件的样式，因此不可能在浏览器中实现相同的功能。

用户可以在输入[type=date]的文本框中输入日期值，日期格式在框中显示为灰色文本。该格式从操作系统的设置中获得。Web作者没有办法更改日期格式，因为目前没有指定格式的标准。

所以不需要改变它，如果我们不改变任何东西，用户将看到日期输入的格式与他们在系统/设备设置中配置的相同，并且他们感到舒适或与他们的语言环境匹配。

记住，这只是用户在屏幕上看到的UI格式，在你的JavaScript/后端，你可以一直保持你想要的格式。

要在Chrome中更改格式(例如，从美式“MM/DD/YYYY”改为“DD/MM/YYYY”)，请访问>设置>高级>添加语言(选择英语英国)。然后:

浏览器重新启动，你会发现日期输入字段是这样的:´25/01/2022

参考谷歌开发者页面。

WHATWG git hub查询相同

测试使用以下日期输入:

<输入类型=“日期” id=“dob” 值=“”/>

如前所述，官方不可能更改格式。然而，它可以对字段设置样式，因此(在一点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上运行得很好(尤其可取，因为在触摸屏上的本机日期操纵器是无敌的)。没有检查其他的，但是不要期望在任何Webkit上失败。

自从这个问题被提出后，web领域发生了很多事情，其中最令人兴奋的是web组件的登陆。现在，您可以使用定制的HTML5元素优雅地解决这个问题，以满足您的需求。如果你想覆盖/改变任何html标签的工作方式，只需使用shadow dom构建你的。

好消息是，已经有很多可用的样板文件，所以很可能你不需要从头开始想出一个解决方案。看看人们在做什么，然后从中获得灵感。

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

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

或者您可以获得创意和弹出完整的日期选择器样式，如您所希望的，与格式和区域设置，回调，和您的长选项列表(您有一个完整的自定义API在您的处置!)

符合标准，没有黑客。

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

希望能有所帮助!