51

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

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

框中带有“mm/dd/yyyy”的日期字段

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

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

我仍然在输入框中得到“mm/dd/yyyy”，直到用户手动更改值。

问题似乎出在 Chrome 上，并且与我的后端框架无关。看看这个问题的实际效果：jsFiddle

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

其他浏览器没有问题。

这是 Chrome 错误吗？还是我错过了 HTML-5 日期字段的工作方式？

更新
请参阅此修订小提琴： http: //jsfiddle.net/HudMe/5/ 它同时具有 HTML-4 和 HTML-5 日期输入，每个都将“10/01/2012”设置为页面加载值.

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

因为通过 value 属性传入了一个有效日期，所以它应该显示“10/01/2012”，但在 Chrome 中，对于 HTML-5 日期字段，什么都没有显示。手动重置此值，然后再次单击，它现在将显示。

在 Safari、Firefox、IE 和 Opera 中页面加载后，HTML5 字段的值无需调整即可按预期显示和提醒。

接受答案的注意事项：
对于 Asp.net mvc-4 的其他用户，您可以使用[DisplayFormat]视图模型中 DateTime 字段声明中的属性调整显示格式。（可在https://stackoverflow.com/a/12634470/613004找到）

4

5 回答 5

59

在 chrome 中设置你需要做的值YYYY-MM-DD我猜是因为这有效：http: //jsfiddle.net/HudMe/6/

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

于 2013-02-01T14:15:19.833 回答
3

有同样的问题。一位同事用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>

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

于 2013-02-01T14:11:24.760 回答
1

我遇到了同样的问题，值类似于 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;
}
于 2016-08-08T14:21:36.187 回答
0

我有同样的问题，我找到了下面给出的解决方案，它使用简单的 HTML、Javascript 和 CSS 使用完整的日期选择器。在这段代码中，我准备像 dd/mm/yyyy 这样的甲酸盐，但你可以工作任何。

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 代码：

#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;
}

输出：

在此处输入图像描述

于 2015-09-02T08:52:04.723 回答
0

如果您正在处理一个表格并且其中一个日期恰好为空，您可以这样编码：

  @{
     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>
       }
   }
于 2019-05-05T17:20:20.473 回答