谷歌Chrome在最近的测试版中最终使用了输入type=date，格式为DD-MM-YYYY。

因此，必须有一种方法来强制使用特定的格式。我正在开发一个HTML5网页，日期搜索现在失败与不同的格式。

我在两年前搜索了这个问题，我的谷歌搜索再次把我带到了这个问题。 不要浪费时间试图用纯JavaScript处理这个问题。我把时间都浪费在日日夜夜的制作上了。没有适合所有浏览器的完整解决方案。所以我建议使用momentJS / jQuery datepicker，或者告诉你的客户端使用默认的日期格式

自帖子活跃2个月前。所以我想也给大家一些建议

在我的情况下，我从读卡器收到的日期是dd/mm/yyyy格式。

我所做的。 如。

Var d="16/09/2019" //收到卡片的日期 函数filldate () { . getelementbyid (cardexpirydate) value = d.split(“/”).reverse () . join(“-”); ｝ <input type="date" id="cardexpirydate"> <br /><br /> <input type="button" value="填写日期" onclick="filldate();" >

代码的作用:

它根据“/”将我得到的日期分割为dd/mm/yyyy(使用split())，并创建一个数组， 然后它反转数组(使用reverse())，因为日期输入支持反转 我所得到的。 然后，它将(使用join())数组连接到一个字符串，根据 输入字段要求的格式

所有这些都在一行中完成。

我想这会对一些人有所帮助，所以我写了这个。

如前所述，官方不可能更改格式。然而，它可以对字段设置样式，因此(在一点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上失败。

我找到了一种改变格式的方法，这是一个棘手的方法，我只是用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">

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>