默认情况下，输入type="date"显示日期为YYYY-MM-DD。
问题是，是否可能将其格式强制为:DD-MM-YYYY?
当前回答
我调整了米格尔的代码，让它更容易理解 我想和像我一样有问题的人分享。
试试这个简单快捷的方法
$("#datePicker").on("change", function(e) { displayDateFormat($(this), '#datePickerLbl', $(this).val()); }); function displayDateFormat(thisElement, datePickerLblId, dateValue) { $(thisElement).css("color", "rgba(0,0,0,0)") .siblings(`${datePickerLblId}`) .css({ position: "absolute", left: "10px", top: "3px", width: $(this).width() }) .text(dateValue.length == 0 ? "" : (`${getDateFormat(new Date(dateValue))}`)); } function getDateFormat(dateValue) { let d = new Date(dateValue); // this pattern dd/mm/yyyy // you can set pattern you need let dstring = `${("0" + d.getDate()).slice(-2)}/${("0" + (d.getMonth() + 1)).slice(-2)}/${d.getFullYear()}`; return dstring; } .date-selector { position: relative; } .date-selector>input[type=date] { text-indent: -500px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="date-selector"> <input id="datePicker" class="form-control" type="date" onkeydown="return false" /> <span id="datePickerLbl" style="pointer-events: none;"></span> </div>
其他回答
这是不可能改变web-kit浏览器使用用户的电脑或手机的默认日期格式。 但是如果你可以使用jquery和jquery UI，有一个日期选择器是可设计的，可以显示在任何格式的开发人员想要的。 jquery UI日期选择器的链接是 在这个页面http://jqueryui.com/datepicker/上，您可以找到演示以及代码和文档或文档链接
编辑:-我发现chrome使用的语言设置默认等于系统设置，但用户可以改变他们，但开发人员不能强迫用户这样做，所以你必须使用其他js解决方案，就像我告诉你可以搜索网页查询像javascript日期选择器或jquery日期选择器
我知道这是一个老帖子，但它是谷歌搜索的第一个建议，简短的答案不，推荐答案用户自定义日期选择器，我使用的正确答案是使用文本框来模拟日期输入，并做任何你想要的格式，这里是代码
<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。
Angular开发者(也许还有其他人)可以考虑这个部分解决方案。
我的策略是检测输入字段的焦点状态，并相应地在日期和文本类型之间切换。明显的缺点是日期格式会随着输入焦点而改变。
这不是完美的，但确保了一个不错的一致性水平，特别是当你有一些日期显示为文本，也有一些日期输入在你的web应用程序。如果你只有一个日期输入，这不会是很有帮助的。
<input class="form-control"
[type]="myInputFocus ? 'date' : 'text'"
id="myInput"
name="myInput"
#myInput="ngModel"
[(ngModel)]="myDate"
(focus)="myInputFocus = true"
(blur)="myInputFocus = false">
并且简单地在组件类的开头声明myInputFocus = false。 显然，将myDate指向所需的控件。
自帖子活跃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())数组连接到一个字符串，根据 输入字段要求的格式
所有这些都在一行中完成。
我想这会对一些人有所帮助，所以我写了这个。
我调整了米格尔的代码，让它更容易理解 我想和像我一样有问题的人分享。
试试这个简单快捷的方法
$("#datePicker").on("change", function(e) { displayDateFormat($(this), '#datePickerLbl', $(this).val()); }); function displayDateFormat(thisElement, datePickerLblId, dateValue) { $(thisElement).css("color", "rgba(0,0,0,0)") .siblings(`${datePickerLblId}`) .css({ position: "absolute", left: "10px", top: "3px", width: $(this).width() }) .text(dateValue.length == 0 ? "" : (`${getDateFormat(new Date(dateValue))}`)); } function getDateFormat(dateValue) { let d = new Date(dateValue); // this pattern dd/mm/yyyy // you can set pattern you need let dstring = `${("0" + d.getDate()).slice(-2)}/${("0" + (d.getMonth() + 1)).slice(-2)}/${d.getFullYear()}`; return dstring; } .date-selector { position: relative; } .date-selector>input[type=date] { text-indent: -500px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="date-selector"> <input id="datePicker" class="form-control" type="date" onkeydown="return false" /> <span id="datePickerLbl" style="pointer-events: none;"></span> </div>
