Показывать минимальные и максимальные даты для выделения в jQuery UI Datepicker - PullRequest
Новая
       16

Показывать минимальные и максимальные даты для выделения в jQuery UI Datepicker

2 голосов
/ 31 марта 2019

Чтобы выбрать диапазон дат, я использую плагин Jquery UI Datepicker.Я использую код, который показывает количество дней при выборе периода.

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

<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>       
<link rel="stylesheet" type="text/css" href="https://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.3.custom.css"></link>

HTML Code: 

<div>
    <h3>From:</h3>
    <input id="from" type="text" name="from" readonly />
</div>
<div>
    <h3>To:</h3>
    <input id="to" type="text" name="to" readonly />
</div>
<div>
    <span>You have chosen:</span>
    <span id="days"></span> days.
</div>

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

var from = new Date();
var to = new Date();
var dayDiff = 1;

$(function() {
    var dates = $("#from, #to").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            dateFormat: "dd.mm.yy",
            minDate: 0,
            maxDate: 14,
            onSelect: function(selectedDate) {
                    var option = this.id == "from" ? "minDate" : "maxDate",
                            instance = $(this).data("datepicker"),
                            date = $.datepicker.parseDate(
                                    instance.settings.dateFormat ||
                                    $.datepicker._defaults.dateFormat,
                                    selectedDate, instance.settings);
                    dates.not(this).datepicker("option", option, date);

                    if (this.id == "from") {
                            from = $(this).datepicker('getDate');
                            if (!(to == "")) {
                                    update_days()
                            }
                    }
                    if (this.id == "to") {
                            to = $(this).datepicker('getDate');
                            update_days()
                    }
            }
    });
});

function update_days() {
    dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
    $("#days").empty()
    $("#days").append(dayDiff)
}

Как сделать динамический выбор дней?

Например, пользователь нажал 1 апреля.Показывает только 14 дней, которые он может выбрать.Если пользователь нажал 7 апреля, он также показывает 14 дней, которые можно выбрать.

В обоих случаях это minDate: 0 и maxDate: 14,

Я нашел похожееКод, только здесь он запрещает выделение следующих 7 дней: 

let counter = 0;
let selected;

const calendar = $("#datepicker").datepicker({
    range: true,
    toggleSelected: false,
    multipleDatesSeparator: " - ",
    multipleDates: false,
    onSelect: function(formattedDate, date, inst) {
            selected = date;
            // console.log(selected[0])
    },
    // onRenderCell: function(date, cellType) {
    //   if (selected) {
    //     const difference = Math.ceil((date - selected[0]) / 1000 / 3600 / 24);
    //     console.log(difference)
    //     if (difference < 7 && difference > -7) {
    //       return {
    //         disabled: true
    //       }
    //     }
    //   }
    // }
}).data('datepicker');

const test = function(date, cellType) {
    if (selected) {
            const difference = Math.ceil((date - selected[0]) / 1000 / 3600 / 24);
            console.log(difference)
            if (difference < 7 && difference > -7) {
                    return {
                            disabled: true
                    }
            }
    }
}

calendar.update('onRenderCell', test)

Нужна ваша помощь!Спасибо!

...