RangeAttribute для проверки даты и времени не работает в веб-приложении MVC

Question

Использование RangeAttribute с типом DateTime для указания минимального и максимального значения для свойства даты не работает. Вопрос о том, как обойти это, был задан здесь , причем решение с наибольшим количеством голосов:

Нет необходимости отключать jQuery проверку даты (и это может вызвать другие проблемы). Вам просто нужно переопределить метод диапазона $ .validator.

По умолчанию он работает со значениями чисел c (а затем возвращается к сравнению строк), поэтому вы можете добавить следующий скрипт ( после jquery .validate. js и jquery .validate.unobtrusive. js, но не в $ (document) .ready

$.validator.methods.range = function(value, element, param) {
    if ($(element).attr('data-val-date')) {
        var min = $(element).attr('data-val-range-min');
        var max = $(element).attr('data-val-range-max');
        var date = new Date(value).getTime();
        var minDate = new Date(min).getTime();
        var maxDate = new Date(max).getTime();
        return this.optional(element) || (date >= minDate && date <= maxDate);
    }
    // use the default method
    return this.optional( element ) || ( value >= param[ 0 ] && value <= param[ 1 ] );
};

Может кто-нибудь помочь мне понять, как реализовать это решение? (Мои HTML & Javascript знания крайне затруднительны, поэтому любая помощь приветствуется.)

---

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

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
    $.validator.methods.range = function(value, element, param) {
    if ($(element).attr('data-val-date')) {
        var min = $(element).attr('data-val-range-min');
        var max = $(element).attr('data-val-range-max');
        var date = new Date(value).getTime();
        var minDate = new Date(min).getTime();
        var maxDate = new Date(max).getTime();
        return this.optional(element) || (date >= minDate && date <= maxDate);
    }
    // use the default method
    return this.optional( element ) || ( value >= param[ 0 ] && value <= param[ 1 ] );
};
</script>

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

Answer 1

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

На основе кода, который вы при условии, я подозреваю, что он может не доходить до if ($(element).attr('data-val-date')) блока кода, который из-за того, что ваша настроенная функция проверки на стороне клиента не работает должным образом.

Пожалуйста, проверьте исходный код соответствующего элемента и убедитесь, что он имеет атрибут data-val-date.

Кроме того, если элемент не включает data-val-date="true", как показано ниже, вы можете изменить код, как показано ниже, чтобы сделать возможным получение фрагмента кода (в пределах блока условия), пока функция запускается этим параметром c элемент.

Свойство StartDateTime

[Range(typeof(DateTime), "1/1/2020", "2/29/2020")]
public DateTime StartDateTime { get; set; }

Html исходный код этого параметра c элемент

Модифицированный код для проверки, является ли текущий элемент указанным c элементом с if $(element).attr('id') == "StartDateTime")

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<script>
    $.validator.methods.range = function (value, element, param) {

        //console.log(param);

        if ($(element).attr('id') == "StartDateTime") {
            var min = $(element).attr('data-val-range-min');
            var max = $(element).attr('data-val-range-max');
            var date = new Date(value).getTime();
            var minDate = new Date(min).getTime();
            var maxDate = new Date(max).getTime();
            console.log(minDate + " | " + maxDate + " | " + date);

            return this.optional(element) || (date >= minDate && date <= maxDate);
        }
        // use the default method
        return this.optional(element) || (value >= param[0] && value <= param[1]);
    }
</script>
}