Air Datepicker - динамические минимальные и максимальные даты для выделения - PullRequest
1 голос
/ 29 марта 2019

Чтобы выбрать диапазон дат, я использую плагин Air Datepicker .

Для подключения плагина я использую CDN:

<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.min.js"></script>

Инициализация плагина:

var block = document.querySelector("#block");
    document.querySelector("#datepicker").addEventListener("focus", function() {
        block.style.display = "none";
    }, false);
    document.querySelector("#datepicker").addEventListener("blur", function() {
        block.style.display = "block";
    }, false);


    var maxdate = new Date(); //get current date
    maxdate.setDate(maxdate.getDate() + 14); //add 14 days
    function parseDate(str) {
    var mdy = str.split('/');
    return new Date(mdy[2], mdy[0]-1, mdy[1]);
    }

    function datediff(first, second) {
    return Math.round((second-first)/(1000*60*60*24));
    }

    $(function() {
        var myDatepicker =  $('#datepicker').datepicker({
            language: 'en',
            range:true,
            autoClose: 'true',
            clearButton: 'true',                
            minDate: new Date(),
            maxDate: maxdate,
            multipleDatesSeparator : ' - ',
            onSelect: function onSelect(selectedDates) {
            console.log(selectedDates);
                if(selectedDates !== undefined && selectedDates != '' && selectedDates.indexOf('-') > -1){
                var mdy = selectedDates.split('-');
                $("#arr_date").val(mdy[0]);
                $("#dep_date").val(mdy[1]);                 
                $("#num_nights").val(datediff(parseDate(mdy[0]), parseDate(mdy[1])));
                }
            }
        })
    });

HTML код:

<input type="text" id="datepicker" placeholder="Select..." class="rental-input" />
<!--Start Date <input type="text" id="arr_date"><br />
End Date <input type="text" id="dep_date"><br />-->
<div id="block">You have chosen: <input type="text" id="num_nights" class="rental-total" readonly />days rental</div>

Как сделать следующий функционал? Пользователь нажимает на первую дату, например, 1 апреля.

Ему показывают только 14 дней, которые он может выбрать, до 14 апреля.

Либо пользователь щелкает 15 апреля, он также показывает только 14 дней, которые можно выбрать, до 29 апреля.

И так при нажатии на любое первое свидание. В обоих случаях это minDate: 0 и maxDate: 14,

Прошу вашей помощи! Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...