Проверка jQuery (диапазон дат)

Question

Я использую плагин jQuery validate, и мне было интересно, есть ли способ проверить, была ли дата, введенная в поле, датой типа yyyy-mm-dd И дата упала с 29 ноября 2010 г. по 15 декабря 2010 г. *

Я довольно новичок в jQuery, поэтому, если есть ответ, пожалуйста, наберите как можно больше ответов, чтобы я мог пройти через него. Большое спасибо за любые / все предложения

Answer 1

Если вы хотите использовать функцию многократного использования, вы можете расширить ответы Эмили и одинокого дня, чтобы предоставить аргумент:

$.validator.addMethod('daterange', function(value, element, arg) {
     // Same as above

     var startDate = Date.parse(arg[0]),
         endDate = Date.parse(arg[1]),
         enteredDate = Date.parse(value);       
     // Same as below

 }, $.validator.format("Please specify a date between {0} and {1}."))

См. источник проверки jQuery диапазон метод для примера.

Answer 2

Я никогда не использовал плагин проверки, но просмотр API показывает, что что-то вроде этого может работать:

$.validator.addMethod('daterange', function(value, element) {
    if (this.optional(element)) {
        return true;
    }

    var startDate = Date.parse('2010-11-29'),
        endDate = Date.parse('2010-12-15'),
        enteredDate = Date.parse(value);

    if (isNan(enteredDate)) {
        return false;
    }

    return ((startDate <= enteredDate) && (enteredDate <= endDate));
});

Думаю, вам нужно добавить класс daterange к соответствующему элементу.

Answer 3

Ответ одинокого дня довольно близок, с несколькими изменениями.Я бы закончил код следующим образом:

    if(isNaN(enteredDate)) return false;

    return ((startDate <= enteredDate) && (enteredDate <= endDate));
}, "Please specify a date between 2010-11-29 and 2010-12-15");

Это исправляет функцию isNaN, а также выдает пользователям сообщение об ошибке, чтобы они знали, что вы ищете.

Answer 4

Держите лошадей, ребята! :)

Не забывайте, что Date.parse не может корректно работать с разными локалями, он только правильно анализирует определенный формат даты.

Если вы используете различные форматы даты (в зависимости от культуры) - лучше придерживаться обработки даты в jquery datepicker.

Итак, предположим, что вы загрузили корректный объект datequicker jquery для конкретной культуры (например, jquery.ui.datepicker-nb-NO.js, где формат даты - DD.MM.yyyy и не анализируется Date.parse ) и инициализировал его, правильный подход:

$.validator.addMethod('dateRange', function (value, element, parameterValue) {
        if (this.optional(element) && !value) {
            return true;
        }
        var dateFormat = $(element).datepicker('option', 'dateFormat');
        try {
            var startDate = $.datepicker.parseDate(dateFormat, parameterValue[0]).getTime();
            var endDate = $.datepicker.parseDate(dateFormat, parameterValue[1]).getTime();
            var enteredDate = $.datepicker.parseDate(dateFormat, value).getTime();
            return (startDate <= enteredDate) && (enteredDate <= endDate);
        } catch (error) {
            return true;
        }
    });

Я поместил материал parseDate в блок try, потому что нет нормального способа выяснить, правильно ли была проанализирована дата.

Answer 5

Сделал пару небольших исправлений в коде Коннора.

Полученный рабочий код:

$.validator.addMethod('daterange', function(value, element, arg) {
    if (this.optional(element) && !value) {
        return true;
    }

    var startDate = Date.parse(arg[0]),
        endDate = Date.parse(arg[1]),
        enteredDate = Date.parse(value);

    if (isNaN(enteredDate)) {
        return false;
    }

    return ( (isNaN(startDate) || (startDate <= enteredDate)) &&
             (isNaN(endDate) || (enteredDate <= endDate)));


   }, $.validator.format("Please specify a date between {0} and {1}."));

Тогда используйте это так:

$("#some_date_input").rules("add",{daterange:['01/31/2001','01/31/2020']});

Answer 6

Диапазон дат min / max атрибуты date тип input

<!--jquery validate-->
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

<input id="christmas-shopper-reservation" type="date" min="2010-11-29" max="2010-12-15">

<label id="christmas-shopper-reservation-error" class="error" style="display:none;" for="christmas-shopper-reservation"></label>