Дата поля должна быть датой в mvc в хроме

Я делаю простое интернет-приложение MVC4, которое позволяет добавлять некоторые элементы в категории.

Вот что я сделал до сих пор.

У меня есть datepicker в представлении mvc. script для datepicker выглядит следующим образом.

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $(function () {
        $('#dtItemDueDate').datepicker({
            dateFormat: 'dd/mm/yy',
            minDate: 0
        });
    });
</script>

Мое свойство модели:

        [DisplayName("Item DueDate")]
        [Required]
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}",ApplyFormatInEditMode = true)]
        [DataType(DataType.DateTime)]
        public DateTime? dtItemDueDate { get; set; }
        public char charCompleted { get; set; }

и, на мой взгляд, я сделал это:

@Html.TextBoxFor(m => m.dtItemDueDate)
@Html.ValidationMessageFor(m => m.dtItemDueDate)

Ошибка выглядит так:

The field Item DueDate must be a date.

Странно, что он работает в IE и mozilla, но не работает в Chrome.

Я нашел много сообщений в SO, но ни один из них не помог

Любые идеи/предложения?

Ответы

Ответ 1

Примечание редактора: этот ответ больше недействителен, так как из jQuery 1.9 (2013) метод $.browser удален

В соответствии с этим сообщением это известная причуда с браузерами на основе Webkit.

Одно из решений - изменить jquery.validate.js, найдя функцию date: function (value, element) и поместив в нее этот код:

if ($.browser.webkit) {
    //ES - Chrome does not use the locale when new Date objects instantiated:
    var d = new Date();
    return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
}
else {
    return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
}

Ответ 2

Без изменения jquery.validate.js вы можете использовать снимок кода ниже в $(document).ready():

jQuery.validator.methods.date = function (value, element) {
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    if (isChrome) {
        var d = new Date();
        return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
    } else {
        return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
    }
};

Ответ 3

Решение Rowan Freeman не будет работать для меня, поскольку .toLocaleDateString(value) не анализирует строки value

здесь решение я придумало = > в jquery.validate.js найдите это определение функции: "date: function (value, element)" и замените код на:

// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function (value, element) {
    var d = value.split("/");
    return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value));
},

Ответ 4

Ниже приведен рабочий код, который может помочь кому-то решить проблему выбора даты в хроме и сафари: Модель:

public DateTime? StartDate { get; set; }

Вид:

@Html.TextBoxFor(model => model.StartDate, "{0:dd/MM/yyyy}", new { @type = "text", @class = "fromDate" })

JS:

$(function () {
    checkSupportForInputTypeDate();

    $('#StartDate').datepicker({        
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd/mm/yy'
    });    
});

//Function to configure date format as the native date type from chrome and safari browsers is clashed with jQuery ui date picker.
function checkSupportForInputTypeDate() {
    jQuery.validator.methods.date = function (value, element) {
        var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
        var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
        if (isSafari || isChrome) {
            var d = new Date();
            return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
        } else {
            return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
        }
    };
}

Ответ 5

Здесь Решение Максима Гершковича изложило немного больше:

jQuery.validator.methods.date = function (value, element) {
    if (value) {
        try {
            $.datepicker.parseDate('dd/mm/yy', value);
        } catch (ex) {
            return false;
        }
    }
    return true;
};

Примечания

Это зависит от метода jQuery datepicker, который поставляется с пользовательским интерфейсом jQuery
Это на самом деле более надежное, чем исходная проверка даты, которая поставляется с jQueryValidate.

В соответствии с документами подтверждение даты:

Возвращает true, если значение является допустимой датой. Использует встроенную функцию JavaScript, чтобы проверить, действительна ли дата, и поэтому не проверяет работоспособность. Только формат должен быть действительным, а не фактическая дата, например 30/30/2008 - это действительная дата.

В то время как parseDate проверяет, что дата действительна и фактически существует.

Ответ 6

Я решил эту проблему, изменив ее с DateTime на Строка.

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