我正在使用网页上的HTML5元素。默认情况下，输入将type="date"日期显示为YYYY-MM-DD。
现在的问题是，是否有可能它的格式更改为类似：DD-MM-YYYY？
有什么办法可以更改输入类型=“日期”格式？
第1743篇《有什么办法可以更改输入类型=“日期”格式？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共9个回答
我找到了一种更改格式的方法，这是一种棘手的方法，我只是使用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">浏览器从用户的系统日期格式获取日期输入格式。
（在受支持的浏览器，Chrome，Edge中测试。）
由于目前尚无规范定义更改日期控件样式的标准，因此无法在浏览器中实现相同的功能。
但是，这种从系统设置获取日期格式的行为更好，我强烈建议我们不要尝试覆盖它。原因是，用户将看到日期输入的格式与他们在系统/设备中配置的格式相同，并且他们习惯或匹配其区域设置。
请记住，这只是用户看到的屏幕上的UI格式，在您的javascript /后端中，您始终可以保留所需的格式。
在阅读了很多讨论之后，我准备了一个简单的解决方案，但是我不想使用很多Jquery和CSS，而只是使用一些javascript。
HTML代码：
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt" onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
CSS代码：
#dt {
text-indent: -500px;
height: 25px;
width: 200px;
}
JavaScript代码：
function mydate() {
//alert("");
document.getElementById("dt").hidden = false;
document.getElementById("ndt").hidden = true;
}
function mydate1() {
d = new Date(document.getElementById("dt").value);
dt = d.getDate();
mn = d.getMonth();
mn++;
yy = d.getFullYear();
document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
document.getElementById("ndt").hidden = false;
document.getElementById("dt").hidden = true;
}
输出：
如果您需要快速解决方案，请尝试执行此操作，以使yyyy-mm-dd变为“ dd- Sep -2016”
1）在您的输入附近创建一个跨度类（用作标签）
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>我相信浏览器将使用本地日期格式。不要以为有可能改变。您当然可以使用自定义日期选择器。
如前所述，正式不可能更改格式。但是，可以对字段进行样式设置，因此（在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上都会失败。
最终版本的Google Chrome浏览器最终使用了输入type=date，格式为DD-MM-YYYY。
因此，必须有一种强制使用特定格式的方法。我正在开发HTML5网页，日期搜索现在失败，但格式不同。
- RFC 3339 / ISO 8601“有线格式”：YYYY-MM-DD。根据HTML5规范，这是在表单提交时或通过DOM API请求时必须用于输入值的格式。它是区域设置和区域独立的。
- 用户界面控件显示的格式，并被接受为用户输入。鼓励浏览器供应商遵循用户的首选项选择。例如，在Mac OS上，在“语言和文字”偏好设置窗格中选择了“美国”区域，Chrome 20使用的格式为“ m / d / yy”。
HTML5规范不包括任何替代或手动指定格式的方法。
相似问题
问题类别
无法使用用户的计算机或手机的默认日期格式更改网络套件浏览器。但是，如果可以使用jquery和jquery UI，则可以选择日期选择器，并且可以按照开发人员的需要以任何格式显示它。指向jquery UI date-picker的链接在此页面上http://jqueryui.com/datepicker/您可以找到演示以及代码和文档或文档链接
编辑：-我发现chrome使用的语言设置默认情况下等于系统设置，但用户可以更改它们，但开发人员无法强迫用户这样做，因此您必须使用其他js解决方案，例如我告诉您可以在网上搜索使用javascript date-pickers或jquery date-picker之类的查询