Как запретить выбор даты, если между ними есть резерв

Question

Как сравнить 2 значения?Мне удалось сравнить два значения, но я не могу получить правильную дату.Кроме того, я хочу добавить класс точно к дате, которая находится в массиве.Я использую air-datepicker и хочу обозначить определенные даты из массива другим цветом и disabled.Кто может сказать мне, как это сделать?

Как запретить выбор даты, если между ними есть резерв?

$(document).ready(function () {
  var disabledDates = ['2018-5-20', '2018-5-21', '2018-5-22', '2018-5-23'];

    var $startDate = $('#start');
    var $endDate = $('#end');

    $startDate.datepicker({
        inline: false,
        range: true,
        toggleSelected: true,
        minDate: new Date(),
        multipleDatesSeparator: ",",
        dateFormat: 'dd-mm-yyyy',
        onSelect: function (fd, date) {
            if(date){
                var arrDate = fd.split(",");
                $startDate.val(arrDate[0]);
                $endDate.val(arrDate[1]);
                if(arrDate[1]){
                    $('.datepicker').css("left", "-100000px");
                    $startDate.blur();
                }
                $endDate.on('click', function () {
                    $startDate.datepicker().val(arrDate[0]).data('datepicker').show();
                });
            }
        },
        onRenderCell: function(date, cellType) {
            var formatted = getFormattedDate(date);
            if (cellType == 'day') {
                var returnDay = {
                    disabled: false
                };
                var selectedDate = disabledDates.filter(function(date){
                    return date == formatted;
                }).length;
                if( selectedDate > 0 || disabledDates[0] <= formatted && formatted <= disabledDates[1]){
                    returnDay = {
                        disabled: true
                    };
                }
                return returnDay;
            }
        }
    });

    function getFormattedDate(date) {
        var year = date.getFullYear(),
            month = date.getMonth() + 1,
            date = date.getDate();
        return year + '-' + month + '-' + date;
    }
});

.reservation-calendar {
  display: flex;
  padding: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>

<div class="reservation-calendar">
    <div class="reservation-calendar__item line">
        <input class="start" type="text" id="start">
    </div>
     - 
    <div class="reservation-calendar__item">
        <input class="start" type="text" id="end">
    </div>
</div>

Answer 1

Вы можете просто вернуть нужный класс и отключить его, когда найдете его в массиве.

$(document).ready(function () {
  var disabledDates = ['2018-5-30', '2018-6-3'];

    var $start = $('#start');
    var $end = $('#end');

    $start.datepicker({
        inline: false,
        range: true,
        toggleSelected: true,
        minDate: new Date(),
        multipleDatesSeparator: ",",
        dateFormat: 'dd-mm-yyyy',
        onSelect: function (fd, date) {
            if(date){
                var arr = fd.split(",");
                $start.val(arr[0]);
                $end.val(arr[1]);
                if(arr[1]){
                    $('.datepicker').css("left", "-100000px");
                    $start.blur();
                }
                $end.on('click', function () {
                    $start.datepicker().val(arr[0]).data('datepicker').show();
                });
            }
        },
        onRenderCell: function(date, cellType) {
            var formatted = getFormattedDate(date);
            console.log(formatted);
            if (cellType == 'day') {
                let returnDay = {
                    classes: 'my-class',
                    disabled: false
                };
                var ab = disabledDates.filter(function(date){
                    return date == formatted;
                }).length;
                console.log(ab);
                if( ab > 0){
                    returnDay = {
                        classes: 'class-you-want-to-add-to-disable-day',
                        disabled: true
                    };
                }
                return returnDay;
            }
        }
    });
    function getFormattedDate(date) {
        var year = date.getFullYear(),
            month = date.getMonth() + 1,
            date = date.getDate();
        return year + '-' + month + '-' + date;
    }
});

.reservation-calendar {
  display: flex;
  padding: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>

<div class="reservation-calendar">
    <div class="reservation-calendar__item line">
        <input class="start" type="text" id="start">
    </div>
     - 
    <div class="reservation-calendar__item">
        <input class="start" type="text" id="end">
    </div>
</div>