HTML-5日期字段显示为"；年月日；在Chrome中，即使设置了有效日期_Html_Google Chrome

HTML-5日期字段显示为"；年月日；在Chrome中，即使设置了有效日期

html google-chrome

HTML-5日期字段显示为"；年月日；在Chrome中，即使设置了有效日期,html,google-chrome,Html,Google Chrome,我刚刚将ASP.NETMVC应用程序升级到MVC-4。基于日期时间值的输入的字段编辑器现在包括HTML-5type=“date”属性/值声明现在，在Chrome中查看时，我的日期输入在输入字段中显示为“mm/dd/yyyy”：即使我使用value属性传入格式正确的日期： <input value="2012/10/02" type="date"/> 我仍然在输入框中得到“mm/dd/yyyy”，直到用户手动更改值为止问题似乎出在C

我刚刚将ASP.NETMVC应用程序升级到MVC-4。基于日期时间值的输入的字段编辑器现在包括HTML-5

type=“date”

属性/值声明

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

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

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

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

问题似乎出在Chrome上，与我的后端框架无关。请参见此问题的实际操作：

…当然，编辑记录是个大问题。如果用户调出一条已经有有效日期的记录，则在提交时不会通过验证，除非他/她点击该字段并手动重置该值

其他浏览器没有问题

这是一个Chrome bug吗？还是我遗漏了HTML-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]

属性调整显示格式。（位于）

也有同样的问题。一位同事解决了这个问题


var lang='nl'；
$（函数（）{
全球化。文化（朗）；
});
//用日期（nl日期符号）和Google Chrome修复了一个奇怪的验证问题
$.validator.methods.date=函数（值，元素）{
var d=Globalize.parseDate（值）；
返回此.optional（element）| |！/Invalid | NaN/.test（d）；
};

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

在chrome中设置需要执行的值

YYYY-MM-DD

，我想这是因为：

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

2012-10-01

我也有同样的问题，我找到了下面使用简单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>

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

输出：

我也遇到了同样的问题，值类似于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;
}

今天：函数（）{
var today=新日期（）；
var d=（today.getDate（）<10？'0'：''）+today.getDate（）；
var m=（（today.getMonth（）+1）<10？'0'：''）+（today.getMonth（）+1）；
var y=today.getFullYear（）；
变量x=字符串（y+“-”+m+“-”+d）；
返回x；
}

如果您正在处理一个表，而其中一个日期恰好为空，则可以按如下方式对其进行编码：

  @{
     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>
       }
   }

@{
if（Model.SomeCollection[i].date\u due==null）
{
}
其他的
{
}
}

区分日期显示的格式和提交到服务器的方式。。。！提交后您会收到什么？@deceze:如上所述，“提交时不会通过验证”@deceze:无论如何，即使这只是一个UI绘制技巧，我还是希望显示当前值而不是“mm/dd/yyyy”，请阅读以下链接中解释的解决方案：[MVC DataType.Date EditorFor不会在Chrome中显示日期值，在IE中显示得很好][1]：确实如此。我也想提到这一点。有关演示文稿和wire格式之间差异背后的基本原理的讨论，请参阅此答案：另外：显示如何使用MVCs

[DisplayFormat]调整格式Html.EditorFor（）中使用的属性
Great！对于rails用户，在应用程序\u helper.rbdef date\u中为\u picker（in_date）{in_date.strftime（“%Y-%m-%d”），除非in_date.blank？}
是一种快速解决问题的方法。如果您正在使用PHP，同样的问题也会出现，这里的示例是$start=new DateTime（$time）；$formattedstart=$start->format（'Y-m-d'）；同样的答案也适用于PHP或用于填写“date”类型表单字段值的任何其他语言
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;
}

  @{
     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>
       }
   }