如果日期之间有保留，如何禁止选择日期

Max 发表于 Dev

最大限度

如何比较 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>

黄华先生

您可以只返回您想要的类，并在数组中找到它时将其禁用。

$(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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。