jquery - jQueryUI Datepicker，只允许范围内的日期

Question

我需要实现一个 jQueryUI 日历，它只允许用户从特定范围内选择日期。日期范围以日期数组数组的形式出现：（ [["2019-10-10", "2019-11-14"],["2019-09-10", "2019-09-27"]] 范围从不重叠）

我已经编写了这段代码，但它只显示其中一个数组的日期，并使所有其他数组无法选择。

$(document).ready(function() { 
    var allowed_dates = component.get('v.dates');
    $( "#datepickerId" ).datepicker({
            showButtonPanel: true,
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd',
            beforeShowDay: function(date) {
                var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    for (var i = 0; i < allowed_dates.length; i++) {
                        var from = new Date(allowed_dates[i][0]);
                        var to = new Date(allowed_dates[i][1]);
                        var current = new Date(string);
                        if (current >= from && current <= to) {
                            return [true, ""];
                        } else {
                            return [false, ""];
                        }
                    }
            }
        });
});

我认为当 for 循环为第二个数组运行时，可选日期会被覆盖

标签： jqueryjquery-uidatepickerjquery-ui-datepicker

Answer 1

我对您的代码进行了以下更改，以实现您的要求。

beforeShowDay: function (date) {
    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
    for (var i = 0; i < allowed_dates.length; i++) {
        var from = new Date(allowed_dates[i][0]);
        var to = new Date(allowed_dates[i][1]);
        var current = new Date(string);
        if (current >= from && current <= to) {
            return [true, ""];
        }
    }
    return [false, ""];
}