有没有办法更改输入type="date"格式？

默认情况下，输入type="date"将日期显示为YYYY-MM-DD。

问题是，是否有可能强制它的格式为：DD-MM-YYYY？

1883313 次浏览
小开

我相信浏览器将使用本地日期格式。不要认为它可以更改。您当然可以使用自定义日期选择器。

小开
最佳答案

改格式是不可能的

我们必须区分有线格式和浏览器的演示格式。

线格式

HTML5日期输入规范指的是RFC 3339规范，它指定了等于：yyyy-mm-dd的完整日期格式。有关更多详细信息，请参阅RFC 3339规范的第5.6节。

此格式由value超文本标记语言属性和DOM属性使用，并且是在进行普通表单提交时使用的格式。

列报格式

浏览器显示日期输入的方式不受限制。在撰写本文时Chrome、Edge、Firefox和Opera都支持日期（请参阅这里）。它们都显示日期选择器并格式化输入字段中的文本。

桌面设备

对于Chrome、Firefox和Opera，输入字段的文本格式基于浏览器的语言设置。对于Edge，它基于Windows语言设置。遗憾的是，所有Web浏览器都忽略了操作系统中配置的日期格式。对我来说，这是非常奇怪的行为，在使用这种输入类型时需要考虑。例如，将操作系统或浏览器语言设置为en-us的荷兰用户将显示01/30/2019，而不是他们习惯的格式：30-01-2019。

Internet Explorer 9、10和11显示具有有线格式的文本输入字段。

移动设备

特别是对于Android上的Chrome，格式化基于Android显示语言。我怀疑其他浏览器也是如此，尽管我无法验证这一点。

小开

谷歌Chrome在其最后一个测试版中最终使用输入type=date，格式为DD-MM-YYYY。

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

小开

区分两种不同的格式很重要：

  • RFC 3339/ISO 8601“线格式”：YYYY-MM-DD。根据HTML5规范，这是在表单提交或通过DOM API请求时必须用于输入值的格式。它与区域和区域无关。
  • 由用户交互界面控件显示并接受为用户输入的格式。鼓励浏览器供应商遵循用户的首选项选择。例如，在Mac OS上，在语言和文本首选项窗格中选择了“美国”区域，Chrome20使用格式“m/d/yy”。

HTML5规范不包括任何覆盖或手动指定两种格式的方法。

小开

无法更改使用用户计算机或手机默认日期格式的Web工具包浏览器。但是，如果您可以使用jQuery和jQuery UI，则有一个可设计的日期选择器，并且可以根据开发人员的需要以任何格式显示。指向jQuery UI日期选择器的链接是在这个页面上http://jqueryui.com/datepicker/你可以找到演示以及代码和留档或留档链接

编辑：我发现chrome使用默认等于系统设置的语言设置，但用户可以更改它们，但开发人员不能强迫用户这样做，因此您必须使用其他js解决方案，例如我告诉您可以使用javascript date-pickers或jQuery date-picker等查询搜索网络

小开

如前所述，<input type=date ... >在大多数浏览器中没有完全实现，所以让我们谈谈类似浏览器（chrome）的webkit。

使用linux，您可以通过更改环境变量LANG来更改它，LC_TIME似乎不起作用（至少对我来说）。

您可以在终端中键入locale以查看当前值。我认为相同的概念可以应用于IOS。

例如：使用：

LANG=en_US.UTF-8 /opt/google/chrome/chrome

日期显示为mm/dd/yyyy

使用： 

LANG=pt_BR /opt/google/chrome/chrome

日期显示为dd/mm/yyyy

您可以使用http://lh.2xlibre.net/locale/pt_BR/（通过您的语言环境更改pt_BR）来创建您自己的自定义语言环境并根据需要格式化您的日期。

关于如何更改默认系统日期的更高级参考：https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/和https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale

您可以使用date查看真实的当前日期格式：

$ date +%x01-06-2015

但由于LC_TIME和d_fmt似乎被chrome拒绝了（我认为这是webkit或chrome的bug），可悲的是它不起作用。：'（

所以，不幸的是，如果LANG环境变量不能解决你的问题，还没有办法。

小开

试试看如果您需要快速解决方案使yyyy-mm-dd去“dd-Sep-2016”

1）在输入附近创建一个跨度类（充当标签）

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

适用于webkit浏览器手机和IE11+的指针事件需要jQuery和JQuery Date

$("#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（特别可取，因为触摸屏上的本地日期操纵器是无与伦比的IMHO）。

小开

自从这个问题被问到以来，网络领域发生了很多事情，其中最令人兴奋的是web组件的登陆。现在，您可以使用专为满足您需求而设计的自定义HTML5元素优雅地解决这个问题。如果您想覆盖/更改任何html标签的工作原理，只需使用影子dom构建您的标签。

好消息是，已经有很多可用的样板，所以很可能你不需要从头开始想出一个解决方案。只需检查人们正在构建什么，并从那里获得想法。

您可以从一个简单的（并且有效的）解决方案开始，例如聚合物的日期输入，它允许您使用像这样的标签：

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

或者你可以得到创意和弹出完整的日期选择器风格如你所愿，你想要的格式和语言环境，回调，和你的长列表选项（你有一个完整的自定义API在你的处置！）

符合标准，没有黑客。

仔细检查可用的polfly，他们支持什么浏览器/版本，如果它覆盖了足够%的用户群……现在是2018年，所以很可能它肯定会覆盖你的大多数用户。

希望有帮助！

小开

在阅读了大量讨论之后，我准备了一个简单的解决方案，但我不想使用大量的JQuery和CSS，只是一些javascript。

超文本标记语言代码：

<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 + "/" + yydocument.getElementById("ndt").hidden = false;document.getElementById("dt").hidden = true;}

输出：

在此处输入图片描述

小开

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

（在支持的浏览器、Chrome、Edge中测试。）

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

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

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

请记住，这只是用户在屏幕上看到的UI格式，在您的JavaScript/后端中，您可以始终保持所需的格式。

要更改Chrome格式（例如从美国“MM/DD/YYYY”更改为“DD/MM/YYYY”），请转到>设置>高级>添加语言（选择英国英语）。然后：

重新启动chrome设置

浏览器重新启动，你会发现日期输入字段如下：'25/01/2022

请参阅谷歌开发者页面。

WHATWG git hub查询

使用以下日期输入进行测试：

<input type="date" id="dob" value=""/>

小开

我知道这是一篇旧文章，但它是谷歌搜索中的第一个建议，简短的答案不，推荐的答案用户自定义日期派克，我使用的正确答案是使用输入框来模拟日期输入并做任何你想要的格式，这里是代码 

<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">&#9660;</span></span><script language="javascript">var matchEnterdDate=0;//function to set back date opacity for non supported browserswindow.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 formatfunction 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，供用户在页面加载时使用。

小开

由于该职位是活跃的2个月前，所以我想给我的输入以及。

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

我所做的。例如

var d="16/09/2019" // date received from cardfunction filldate(){document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");}
<input type="date" id="cardexpirydate"><br /><br /><input type="button" value="fill the date" onclick="filldate();">

代码做什么：

  1. 它将我得到的日期拆分为dd/mm/yyyy（使用拆分（））基于“/”并制作一个数组，
  2. 然后反转数组（使用反向（）），因为日期输入支持反向我得到了什么。
  3. 然后它根据字符串连接（使用连接（））数组输入字段
    4. 所需的格式

所有这些都在一条线上完成。

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

小开

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

小开

我两年前搜索过这个问题，我的谷歌搜索再次让我想到这个问题。不要浪费你的时间试图用纯JavaScript来处理这个问题。我浪费了我的时间试图让它成为dd/mm/yyyy。没有适合所有浏览器的完整解决方案。所以我建议使用瞬间JS/ jQuery日期选择器或告诉你的客户使用默认日期格式而不是

小开

我将代码从米格尔调整为更易于理解我想和像我这样有问题的人分享。

试试这个简单快捷的方法

$("#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 needlet 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>

小开

感谢@陈志立和@李明博

img1

img2

img3

Img4

使用VanillaJS和CSS的Datepicker。

CSS-样式：

/*================== || Date Picker ||=======================================================================================*/
/*-------Removes the // Before dd - day------------------------*/input[type="date"]::-webkit-datetime-edit-text{color: transparent;}



/*------- DatePicker ------------------------*/input[type="date"] {background-color: aqua;border-radius: 4px;border: 1px solid #8c8c8c;font-weight: 900;}




/*------- DatePicker - Focus ------------------------*/input[type="date"]:focus{outline: none;box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);}





input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {color: #fff;position: relative;}


/*------- Year ------------------------*/input[type="date"]::-webkit-datetime-edit-year-field {position: absolute !important;border-left: 1px solid #8c8c8c;padding: 2px;color: #000;left: 56px;}

/*------- Month ------------------------*/input[type="date"]::-webkit-datetime-edit-month-field {position: absolute !important;border-left: 1px solid #8c8c8c;padding: 2px;color: #000;left: 26px;}


/*------- Day ------------------------*/input[type="date"]::-webkit-datetime-edit-day-field {position: absolute !important;color: #000;padding: 2px;left: 4px;}

JAVASCRIPT：

 // ================================ || Format Date Picker || ===========================================================function GetFormatedDate(datePickerID){let rawDate = document.getElementById(datePickerID).value; // Get the Raw Datereturn rawDate.split('-').reverse().join("-"); // Reverse the date}

使用：

 document.getElementById('datePicker').onchange = function () { alert(GetFormatedDate('datePicker')); }; // The datepickerID
小开

在Firefox（未知版本）中，在设置>语言中，他们添加了一个选项：使用“西班牙语（西班牙）”的操作系统设置来格式化日期、时间、数字和测量值

此选项将使用操作系统的区域设置来显示日期！太糟糕了，默认情况下它不启用（可能来自新安装？）

小开

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指向您想要的控件。

小开 

const birthday = document.getElementById("birthday");
const button = document.getElementById("wishBtn");

button.addEventListener("click", () => {let dateValue = birthday.value;// Changing format :)dateValue = dateValue.split('-').reverse().join('-');
alert(`Happy birthday king/Queen of ${dateValue}`);});
<input type="date" id="birthday" name="birthday" value="2022-10-10"/>
<button id="wishBtn">Clik Me</button>


提交答案