Выбор двух дат при условии не disabled

173
22 мая 2018, 16:20

air datepicker Не получается сделать условие, при котором нельзя будет выбирать range, когда между датами есть disabled. Кто знает, не стесняйтесь подсказывать ;)

$(document).ready(function () { 
  var disabledDates = ['2018-5-24', '2018-5-25', '2018-5-26']; 
 
    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); 
            if (cellType == 'day') { 
                var returnDay = { 
                    disabled: false 
                }; 
                var ab = disabledDates.filter(function(date){ 
                    return date == formatted; 
                }).length; 
                if( ab > 0){ 
                    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>

READ ALSO
Jquery to native js

Jquery to native js

есть JQ код:

223
Почему в данном случае не получается привязать контекст?

Почему в данном случае не получается привязать контекст?

К сожалению, не могу продемонстрировать код в работе, так как здесь осуществляется работа с сервером с помощью ajaxУпрощенный пример

224
Реализация scroll

Реализация scroll

Как сделать чтобы скролл доходил точно до того блока с которого выезжал?

181
oncontextmenu, click по элементу и вне его

oncontextmenu, click по элементу и вне его

сижу и думаю, то ли я что то упускаю то ли что происходитесть тестовый параграф

183