HTML-5日期字段在Chrome中显示为"mm/dd/yyyy",即使设置了有效日期。
HTML-5日期字段在Chrome中显示为"mm/dd/yyyy",即使设置了有效日期。
我刚刚将一个ASP.Net MVC应用程序升级到了MVC-4。基于DateTime值的输入字段编辑器现在包括HTML-5的type="date"
属性/值声明。
现在,在Chrome中查看时,我的日期输入显示为输入框中的"mm/dd/yyyy":
即使我传入一个格式正确的日期作为value属性:
我仍然在输入框中看到"mm/dd/yyyy",直到用户手动更改值为止。
这个问题似乎与Chrome有关,与我的后端框架无关。在这个链接中可以看到这个问题的示例:jsFiddle
...对于编辑记录来说是一个很大的问题。如果用户打开一个已经有有效日期的记录,除非他们点击到字段中并手动重置值,否则提交时不会通过验证。
其他浏览器没有问题。
这是Chrome的一个bug吗?还是我对HTML-5日期字段的工作方式有什么误解?
更新
请查看这个修订版的fiddle: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的用户,您可以使用视图模型中DateTime字段声明的[DisplayFormat]
属性来调整显示格式。(在这里找到:https://stackoverflow.com/a/12634470/613004)
HTML-5日期字段在Chrome中显示为“mm / dd / yyyy”,即使设置了有效日期,这个问题的出现原因是日期格式不符合要求。解决方法是通过在日期的月份和日期前面添加一个零来确保日期格式为两位数。
下面是一个在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; }
以上代码将在日期的月份和日期前面添加了一个零,以确保日期格式为两位数。这样,即使在Chrome中,日期字段也会正确显示为“mm / dd / yyyy”。这个解决方法已经在Chrome、Firefox和Edge上进行了测试,可以有效解决该问题。
HTML-5 date字段在Chrome中显示为"mm/dd/yyyy",即使设置了有效的日期,这是为什么呢?原因是Chrome要求日期的格式必须是"yyyy-MM-dd",而不是"YYYY-MM-DD"。解决方法是将日期设置为"yyyy-MM-dd"格式。以下是一些解决方法的示例:
在Chrome中设置日期值的方法是使用"YYYY-MM-DD"格式,可以参考这个链接:http://jsfiddle.net/HudMe/6/
关于日期显示格式和传输格式之间差异的讨论可以参考这个回答:stackoverflow.com/a/9519493/1972476
使用MVC的[DisplayFormat]
属性可以调整日期字段的显示格式,示例代码可以参考这个链接:stackoverflow.com/a/12634470/613004
对于Rails开发者,可以在application_helper.rb文件中使用以下代码来设置日期显示格式:def date_for_picker(in_date){ in_date.strftime("%Y-%m-%d") unless in_date.blank? }
如果使用PHP,可以参考以下示例代码来设置日期格式:$start = new DateTime($time); $formatedStart = $start->format('Y-m-d');
对于ASP.NET MVC 5,日期格式应该设置为"yyyy-MM-dd",而不是"YYYY-MM-DD"。
关于所需格式的文档可以在这里找到:developers.google.com/web/updates/2012/08/…