Поле должно быть датой - проверка датыPicker не выполняется в Chrome - mvc

У меня странная проблема. Моя проверка даты не работает в Chrome. Я пробовал этот, но это не сработало для меня.

У меня это в моей модели:

[Display(Name = "Date")]
[DataType(DataType.Date)]
public DateTime Date { get; set; }

Мой вид:

<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
</div>

$(document).ready(function () {
    $('.picker').datepicker({
        dateFormat: 'dd.mm.yy',
        changeMonth: true,
        changeYear: true,
        selectOtherMonths: true
    });
});

Все работает в Opera и Firefox, но Chrome не любит этот тип даты. Я постоянно получаю следующую ошибку The field 'Date' must be a date.

Любые идеи?

UPDATE

Кажется, что существует проблема, когда код находится внутри частичного представления. Когда я копирую этот код на главную страницу, проверка корректно работает.

Я вставляю частичный вид внутри моего основного вида просто так:

@Html.Partial("_CreateOrEdit", Model)

И этот код находится внутри частичного представления:

@model Pro.Web.Models.Model

<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)

$(document).ready(function () {
$('.picker').datepicker({
    dateFormat: 'dd.mm.yy',
    changeMonth: true,
    changeYear: true,
    selectOtherMonths: true
});

</script>
});

UPDATE2

В конце концов, это не сработает. Иногда это работает, иногда нет. Я несколько раз щелкнул по датам и иногда проверкам. На тот же день может быть хорошая и неправильная проверка.

Это выводит html для поля даты:

<div class="editor-field">
<input class="picker" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="date" name="Item.Date" type="text" value="1.1.0001. 0:00:00" />
<span class="field-validation-valid" data-valmsg-for="Item.Date" data-valmsg-replace="true"></span>
</div>

Ответы

Ответ 1

Точная ситуация здесь (частичное представление)

Я решил это, удалив атрибут проверки и выполнив проверку со стороны сервера:

$('#date').removeAttr("data-val-date");

Ответ 2

На мой взгляд, проблема заключается в том, что MVC генерирует для ввода HTML5 дату с [type=date]. Это приводит к тому, что в хром действительный формат даты совпадает с форматом системной даты.

Возможно, вы можете установить формат даты в MVC, чтобы быть обычным с JqueryUI, используя следующий атрибут:

[DataType(DataType.Date), DisplayFormat( DataFormatString="{0:dd.MM.yy}", ApplyFormatInEditMode=true )]

Вторая идея - использовать код из статьи: Создание собственного HTML 5 Datepicker с откатом в пользовательский интерфейс jQuery

Еще одна вещь. Есть хорошая тема о дате в html-вводе: Есть ли способ изменить тип ввода = "date" формат?

Ответ 3

Я решил это, удалив атрибут проверки

@model Pro.Web.Models.Model

<div class="editor-field">
@{ Html.EnableClientValidation(false); }
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
@{ Html.EnableClientValidation(true); }

Ответ 4

Своеобразно опаздывать на вечеринку через год, но я пробовал каждое решение, которое я мог найти относительно этой ошибки, и никто из них не помог. Так что для тех, кто борется, как я, вот что решает эту проблему.

Добавьте к концу jquery.validate.globalize.js и его уменьшенную версию (в зависимости от того, что вы используете) этот небольшой фрагмент кода.

... 
   $.validator.methods.range = function (value, element, param) {
        var val = Globalize.parseFloat(value);
        return originalMethods.range.call(this, val, element, param);
    };


}(jQuery, Globalize));

Globalize.culture("en-GB");

Конечно, используйте собственные настройки культуры внутри кавычек.

Надеюсь, что это поможет!

Ответ 5

Проблема связана с <input type="date" /> (HTML5), поскольку спецификация говорит, что действительное значение определяется как RFC3339.

Итак, я изменил свой вид на что-то вроде этого:

<script>
    $(function () {
         $("#validfrom").datepicker({
             altField: "#ValidFrom",
             altFormat: "yy-mm-dd"
         });
    });
</script>

<div class="editor-label">
    @Html.LabelFor(model => model.ValidFrom)
</div>
<div class="editor-field">
    <input id="validfrom" type="text" name="validfrom" />
    @Html.HiddenFor(model => model.ValidFrom)
    @Html.ValidationMessageFor(model => model.ValidFrom)
</div>

Надеюсь, что это поможет.

Ответ 6

У меня была такая же ошибка. Выбрал его, применив datetime как тип,

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" ,  @type = "datetime" } })

аналогично использовать время только для времени

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" ,  @type = "time" } })