默认情况下，输入type="date"显示日期为YYYY-MM-DD。
问题是，是否可能将其格式强制为:DD-MM-YYYY?
当前回答
我找到了一种改变格式的方法，这是一个棘手的方法，我只是用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">
其他回答
我相信浏览器将使用本地日期格式。不要认为这是可能改变的。当然，您可以使用自定义日期选择器。
要改变格式是不可能的
我们必须区分在线格式和浏览器的表示格式。
有线格式
HTML5日期输入规范引用了RFC 3339规范，该规范指定的完整日期格式等于:yyyy-mm-dd。有关更多详细信息，请参阅RFC 3339规范的5.6节。
value HTML属性和DOM属性使用这种格式，并且在进行普通表单提交时使用这种格式。
报告格式
浏览器在显示日期输入方面是不受限制的。在编写Chrome, Edge, Firefox和Opera的日期支持(见这里)。它们都显示一个日期选择器，并在输入字段中格式化文本。
桌面设备
For Chrome, Firefox, and Opera, the formatting of the input field's text is based on the browser's language setting. For Edge, it is based on the Windows language setting. Sadly, all web browsers ignore the date formatting configured in the operating system. To me this is very strange behaviour, and something to consider when using this input type. For example, Dutch users that have their operating system or browser language set to en-us will be shown 01/30/2019 instead of the format they are accustomed to: 30-01-2019.
Internet Explorer 9、10和11显示wire格式的文本输入字段。
移动设备
特别是对于Android上的Chrome，格式是基于Android显示语言的。我怀疑其他浏览器也是如此，尽管我还没能证实这一点。
自从这个问题被提出后，web领域发生了很多事情，其中最令人兴奋的是web组件的登陆。现在，您可以使用定制的HTML5元素优雅地解决这个问题，以满足您的需求。如果你想覆盖/改变任何html标签的工作方式，只需使用shadow dom构建你的。
好消息是，已经有很多可用的样板文件，所以很可能你不需要从头开始想出一个解决方案。看看人们在做什么，然后从中获得灵感。
你可以从一个简单(有效)的解决方案开始，比如聚合物的datetime-input，它允许你使用这样的标签:
<date-input date="{{date}}" timezone="[[timezone]]"></date-input>
或者您可以获得创意和弹出完整的日期选择器样式，如您所希望的，与格式和区域设置，回调，和您的长选项列表(您有一个完整的自定义API在您的处置!)
符合标准，没有黑客。
仔细检查可用的插件，它们支持哪些浏览器/版本，以及它是否覆盖了足够百分比的用户基础……现在是2018年，所以它肯定会覆盖你的大部分用户。
希望能有所帮助!
谷歌Chrome在最近的测试版中最终使用了输入type=date，格式为DD-MM-YYYY。
因此，必须有一种方法来强制使用特定的格式。我正在开发一个HTML5网页，日期搜索现在失败与不同的格式。
我知道这是一个老帖子，但它是谷歌搜索的第一个建议，简短的答案不，推荐答案用户自定义日期选择器，我使用的正确答案是使用文本框来模拟日期输入，并做任何你想要的格式，这里是代码
<html>
<body>
date :
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
<input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">▼</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
window.onload =function(){
var input = document.createElement('input');
input.setAttribute('type','date');
input.setAttribute('value', 'some text');
if(input.value === "some text"){
allDates = document.getElementsByClassName("xDateContainer");
matchEnterdDate=1;
for (var i = 0; i < allDates.length; i++) {
allDates[i].style.opacity = "1";
}
}
}
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
var date = new Date(xObj.value);
var month = date.getMonth();
var day = date.getDate();
var year = date.getFullYear();
if(month!='NaN'){
document.getElementById(xTraget).value=day+" / "+month+" / "+year;
}else{
if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
}
}
</script>
</body>
</html>
1-请注意，此方法只适用于支持日期类型的浏览器。
2- JS代码中的第一个函数是针对不支持日期类型的浏览器，并将外观设置为正常的文本输入。
3-如果你将在你的页面中使用此代码进行多个日期输入，请在函数调用和输入本身中更改文本输入的ID“xTime”，当然，使用你想要的表单提交的输入名称。
4-在第二个函数中，你可以使用任何你想要的格式，而不是日+" / "+月+" / "+年，例如年+" / "+月+" / "+日，在文本输入中使用占位符或值作为页面加载时用户的yyyy / mm / dd。
