关于html5：HTML-5日期字段在Chrome中显示为“mm / dd / yyyy”，即使设置了有效日期


HTML-5 date field shows as “mm/dd/yyyy” in Chrome, even when valid date is set

我刚刚将ASP.Net MVC应用程序升级到MVC-4。基于DateTime值的输入的字段编辑器现在包括HTML-5 type="date"属性/值声明。

现在，在Chrome中查看时，我的日期输入在输入字段中显示为"mm / dd / yyyy"：

date field with 'mm/dd/yyyy' in box

即使我使用value属性传递正确格式的日期：

1
<input value="2012/10/02" type="date"/>

我仍然在输入框中输入"mm / dd / yyyy"，直到用户手动更改值为止。

问题似乎与Chrome有关，并且与我的后端框架无关。在操作中看到这个问题：jsFiddle

...当然，编辑记录的大问题。如果用户提取已有有效日期的记录，则不会在提交时通过验证，除非他/她单击该字段并手动重置该值。

没有其他浏览器的问题。

这是Chrome错误吗？或者我错过了关于HTML-5日期字段应该如何工作的方式？

UPDATE
看到这个修改小提琴：http：//jsfiddle.net/HudMe/5/它有一个HTML-4和一个HTML-5日期输入，每个输入都设置为"10/01/2012"作为页面加载的值。

单击任一日期字段。
Javascript应该使用该元素的字段值来发出警报。

由于已使用value属性传递了有效日期，因此应显示"10/01/2012"，但在Chrome中，对于HTML-5日期字段，不会显示任何内容。手动重置此值，然后再次单击，现在将显示。

HTML5字段中的值按预期显示和警告，无需在Safari，Firefox，IE和Opera中的页面加载后进行调整。

关于接受答案的说明：
对于Asp.net mvc-4的其他用户，您可以使用视图模型中DateTime字段声明中的[DisplayFormat]属性调整显示格式。 (见https://stackoverflow.com/a/12634470/613004)

相关讨论

在chrome中设置你需要做的值YYYY-MM-DD我想因为这个工作：http：//jsfiddle.net/HudMe/6/

因此，要使其工作，您需要将日期设置为2012-10-01

相关讨论

有同样的问题。一位同事用jQuery.Globalize解决了这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="/Scripts/jquery.validate.js" type="text/javascript">
<script src="/Scripts/jquery.globalize/globalize.js" type="text/javascript">
<script src="/Scripts/jquery.globalize/cultures/globalize.culture.nl.js">
<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);
    };

我正在使用jQuery Datepicker来选择日期。

如果您正在处理表并且其中一个日期恰好为null，则可以像这样编写代码：

1
2
3
4
5
6
7
8
9
10
  @{
     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>
       }
   }

我有同样的问题，有一个像2016-08-8的值，然后我解决了添加一个零有两位数的日子，它的工作原理。
在chrome，firefox和Edge中测试过

1
2
3
4
5
6
7
8
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;
}

我有同样的问题，我找到了解决方案，下面给出了完整的datepicker使用简单的HTML，Javascript和CSS。在这个代码中，我准备像dd / mm / yyyy这样的合成，但你可以工作。

HTML代码：

1
2
3
4
5
    <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代码：

1
#dt{text-indent: -500px;height:25px; width:200px;}

Javascript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
}

输出：

enter image description here