Пользовательский интерфейс jQuery DatePicker | Запретить диапазон дат с отключенными датами - PullRequest
Новая
       66

Пользовательский интерфейс jQuery DatePicker | Запретить диапазон дат с отключенными датами

0 голосов
/ 17 ноября 2018

Я создал выбор диапазона дат Start Date и End Date, используя jQuery Ui Date Picker.

У меня есть проверка, чтобы End Date был меньше Start Date.

Вот код: 

<input type="text" name="start_date" class="start_date form-control" required readonly>
<input type="text" name="end_date" class="end_date form-control" required readonly>
<script>
$(function () {
    var startDate = "2018-11-20",  // some start date
        endDate   = "2018-11-21",  // some end date
        dateRange = [];            // array to hold the range

    // populate the array
    for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
        dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
    }

    $('.start_date').datepicker({
        dateFormat : 'yy-mm-dd',
        minDate: 2,
        beforeShowDay: function (date) {
            var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
            return [dateRange.indexOf(dateString) == -1];
        },
        onSelect: function( selectedDate )
        {
            $( ".end_date" ).datepicker( "option", "minDate", selectedDate, {
                beforeShowDay: function (date) {
                    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [dateRange.indexOf(dateString) == -1];
                }
            } );
        }
    });

    $('.end_date').datepicker({
        dateFormat : 'yy-mm-dd',
        minDate: 2,
        beforeShowDay: function (date) {
            var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
            return [dateRange.indexOf(dateString) == -1];
        },
        onSelect: function( selectedDate )
        {
            $( ".start_date" ).datepicker( "option", "maxDate", selectedDate, {
                beforeShowDay: function (date) {
                    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [dateRange.indexOf(dateString) == -1];
                }
            } );
        }
    });
});
</script>

А вот и результат:

result

Я хочу запретить пользователю выбирать диапазон дат, у которого уже отключены даты, поэтому; пользователь не может выбрать от 19 до 22, поскольку у него отключены 20 и 21.

Возможно ли это?

...