HTML-5 日期字段在 Chrome 中显示为“mm/dd/yyyy”，即使设置了有效日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14647290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML-5 date field shows as "mm/dd/yyyy" in Chrome, even when valid date is set
提问by Faust
I just upgraded an ASP.Net MVC application to MVC-4. The field editor for inputs based on DateTime values now include's the HTML-5 type="date"attribute/value declaration.
我刚刚将 ASP.Net MVC 应用程序升级到 MVC-4。基于 DateTime 值的输入字段编辑器现在包括 HTML-5type="date"属性/值声明。
Now, when viewing in Chrome, my date inputs show up with "mm/dd/yyyy" in the input field:
现在，在 Chrome 中查看时，我的日期输入在输入字段中显示为“mm/dd/yyyy”：
Even when I pass in a correctly-formatted date with the value attribute:
即使我使用 value 属性传入格式正确的日期：
<input value="2012/10/02" type="date"/>
I'm still getting "mm/dd/yyyy" in the input box, which is there until the user manually changes the value.
我仍然在输入框中收到“mm/dd/yyyy”，直到用户手动更改该值为止。
The problem appears to be with Chrome, and is independent of my back-end framework. See this problem in action: jsFiddle
问题似乎出在 Chrome 上，并且与我的后端框架无关。在行动中看到这个问题：jsFiddle
...big problem for editing records, of course. If the user pulls up a record that already has a valid date, it won't pass validation on submit, unless s/he clicked into the field and reset the value manually.
...当然是编辑记录的大问题。如果用户拉出一个已经有一个有效日期的记录，它不会在提交时通过验证，除非他/她点击进入该字段并手动重置该值。
No problems with the other browsers.
其他浏览器没有问题。
Is this a Chrome bug? Or have I missed something about the way the HTML-5 date field is supposed to work?
这是 Chrome 的错误吗？或者我是否错过了 HTML-5 日期字段应该工作的方式？
UPDATE
See this revise fiddle: http://jsfiddle.net/HudMe/5/It has both an HTML-4 and an HTML-5 date input, each with "10/01/2012" set as the value on page-load.
更新
请参阅此修订小提琴：http: //jsfiddle.net/HudMe/5/它具有 HTML-4 和 HTML-5 日期输入，每个都将“10/01/2012”设置为页面加载值.
Click into either date field. The Javascript should pup up an alert with the value of the field for that element.
单击任一日期字段。Javascript 应该弹出一个带有该元素字段值的警报。
Because a valid date has been passed in with the value attribute, this should show "10/01/2012", but in Chrome, for the HTML-5 date field, nothing shows. Reset this value by hand, then click again, and it will now show.
由于已通过 value 属性传入有效日期，因此应显示“10/01/2012”，但在 Chrome 中，对于 HTML-5 日期字段，没有任何显示。手动重置此值，然后再次单击，它现在将显示。
The value from the HTML5 field shows and alerts as expected without adjustment after pageload in Safari, Firefox, IE and Opera.
在 Safari、Firefox、IE 和 Opera 中页面加载后，HTML5 字段中的值按预期显示和警告，无需调整。
Note on accepted answer:
For other users of Asp.net mvc-4, you can adjust the display format with the [DisplayFormat]attribute on the DateTime field declaration in your view-model. (found at https://stackoverflow.com/a/12634470/613004)
已接受答案的注意事项：
对于 Asp.net mvc-4 的其他用户，您可以使用[DisplayFormat]视图模型中 DateTime 字段声明上的属性调整显示格式。（在https://stackoverflow.com/a/12634470/613004找到）
回答by eric.itzhak
In chrome to set the value you need to do YYYY-MM-DDi guess because this worked : http://jsfiddle.net/HudMe/6/
在 chrome 中设置你需要做的值YYYY-MM-DD我猜是因为这有效：http: //jsfiddle.net/HudMe/6/
So to make it work you need to set the date as 2012-10-01
因此，要使其正常工作，您需要将日期设置为 2012-10-01
回答by Wim
Had the same problem. A colleague solved this with jQuery.Globalize.
有同样的问题。一位同事用jQuery.Globalize解决了这个问题。
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/globalize.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/cultures/globalize.culture.nl.js"></script>
<script type="text/javascript">
var lang = 'nl';
$(function () {
Globalize.culture(lang);
});
// fixing a weird validation issue with dates (nl date notation) and Google Chrome
$.validator.methods.date = function(value, element) {
var d = Globalize.parseDate(value);
return this.optional(element) || !/Invalid|NaN/.test(d);
};
</script>
I am using jQuery Datepicker for selecting the date.
我正在使用 jQuery Datepicker 来选择日期。
回答by ashish bhatt
I have same problem and i found solution which is given below with full datepicker using simple HTML,Javascript and CSS. In this code i prepare formate like dd/mm/yyyy but you can work any.
我有同样的问题，我找到了下面给出的使用简单 HTML、Javascript 和 CSS 的完整日期选择器的解决方案。在这段代码中，我准备了像 dd/mm/yyyy 这样的格式，但您可以使用任何格式。
HTML Code:
HTML代码：
<body>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt" onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
</body>
CSS Code:
CSS 代码：
#dt{text-indent: -500px;height:25px; width:200px;}
Javascript Code :
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;
}
Output:
输出：
回答by Ricardo Bandala
I was having the same problem, with a value like 2016-08-8, then I solved adding a zero to have two digits days, and it works. Tested in chrome, firefox, and Edge
我遇到了同样的问题，值为 2016-08-8，然后我解决了添加零以获得两位数的天数，并且它有效。在 chrome、firefox 和 Edge 中测试
today:function(){
var today = new Date();
var d = (today.getDate() < 10 ? '0' : '' )+ today.getDate();
var m = ((today.getMonth() + 1) < 10 ? '0' :'') + (today.getMonth() + 1);
var y = today.getFullYear();
var x = String(y+"-"+m+"-"+d);
return x;
}
回答by James
If you are dealing with a table and one of the dates happens to be null, you can code it like this:
如果您正在处理一个表并且其中一个日期恰好为空，您可以这样编码：
@{
if (Model.SomeCollection[i].date_due == null)
{
<td><input type='date' id="@("dd" + i)" name="dd" /></td>
}
else
{
<td><input type='date' value="@Model.SomeCollection[i].date_due.Value.ToString("yyyy-MM-dd")" id="@("dd" + i)" name="dd" /></td>
}
}
