Поле даты HTML-5 отображается как "мм/дд/гггг" в Chrome, даже если установлена действительная дата

Я только что обновил приложение ASP.Net MVC до MVC-4. Редактор полей для входов на основе значений DateTime теперь включает объявление атрибута/значения HTML-5 type="date".

Теперь, когда вы просматриваете в Chrome, мои входы ввода отображаются в поле ввода "mm/dd/yyyy":

Даже когда я передаю правильно отформатированную дату с атрибутом value:

Я все еще получаю "mm/dd/yyyy" в поле ввода, которое есть до тех пор, пока пользователь не изменит значение вручную.

Проблема, похоже, связана с Chrome и не зависит от моей внутренней инфраструктуры. См. Эту проблему в действии: jsFiddle

... большая проблема для редактирования записей, конечно. Если пользователь вытащил запись, у которой уже есть действительная дата, она не будет проходить проверку для отправки, если только он не щелкнул в поле и reset значение вручную.

Является ли это ошибкой Chrome? Или я пропустил что-то о том, как должно работать поле даты HTML-5?

UPDATE
См. Эту версию скрипта: http://jsfiddle.net/HudMe/5/ В ней есть как HTML-4, так и дата ввода HTML-5, каждая с "10/01/2012" задано как значение для загрузки страницы.

Нажмите на любое поле даты. Javascript должен поджарить предупреждение со значением поля для этого элемента.

Поскольку действительная дата была передана с атрибутом value, это должно показать "10/01/2012", но в Chrome для поля даты HTML-5 ничего не отображается. reset это значение вручную, затем нажмите еще раз, и теперь он будет отображаться.

Значение из поля HTML5 показывает и предупреждает, как и ожидалось, без настройки после загрузки в Safari, Firefox, IE и Opera.

Примечание о принятом ответе:
Для других пользователей Asp.net mvc-4 вы можете настроить формат отображения с помощью атрибута [DisplayFormat] в объявлении поля DateTime в вашей модели представлений. (находится в qaru.site/info/27729/...)

Ответы

Ответ 1

В chrome для установки значения, которое вам нужно сделать YYYY-MM-DD, я думаю, потому что это сработало: http://jsfiddle.net/HudMe/6/

Чтобы сделать это, вам нужно установить дату как 2012-10-01

Ответ 2

Была та же проблема. Коллега решил это с помощью 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 для выбора даты.

Ответ 3

У меня такая же проблема, и я нашел решение, которое приведено ниже с полным датпикером, используя простые HTML, Javascript и CSS. В этом коде я готовлю formate как 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;
}

Вывод:

Ответ 4

У меня была такая же проблема со значением, как 2016-08-8, тогда я решил добавить нуль, чтобы иметь два знака дня, и он работает. Протестировано в хроме, 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;
}

Ответ 5

Если вы имеете дело с таблицей и одна из дат оказывается нулевой, вы можете закодировать ее следующим образом:

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