javascript - 在 jQuery 日期选择器 UI 上禁用/启用选定的日期范围

Question

所以我有以下演示 http://dev.driz.co.uk/week.html显示了一个 jQuery UI 日期选择器，该日期选择器针对一年中的每个月都有多个实例。

我对其进行了修改，以便用户选择整周，然后将这些周的开始和结束日期存储在右侧边栏中，并带有周数。

我想做的是在用户选择日期后禁用这些日期，这样他们就可以在日历选择器上看到选择了哪些日期(并防止他们多次添加相同的日期范围)。

但是我不知道从哪里开始...我已经创建了一些启用和禁用日期函数，但不知道如何使用 beforeShowDay 方法实际禁用日期。

例如:

var array = ["2013-03-14","2013-03-15","2013-03-16"]

$('.week-picker').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    }
});

但是我该如何禁用日期范围呢？因为我只有开始日期和结束日期。我可以像我的示例一样在日期选择器位于页面上之后调用 beforeShowDay 吗？以及我如何才能重新启用日期？

代码如下:

$(function() {

    var startDate;
    var endDate;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active');
        }, 1);
    }

    $('.week-picker').datepicker( {
        defaultDate: '01/01/2014',
        minDate: '01/01/2013',
        maxDate: '01/01/2015',
        changeMonth: false,
        changeYear: true,
        showWeek: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        numberOfMonths: 12,
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

            addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            disableDates( $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if(date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });

    $('.remove').live('click', function(e){

        enableDates($(this).attr('data-startdate'), $(this).attr('data-enddate'));

        $(this).parent('div').remove();
    });

});

// adds the week to the sidebar
function addWeek(weekNum, startDate, endDate){

    $('.weeks-chosen').append('<div data-startdate="'+startDate+'" data-enddate="'+endDate+'"><span class="weekNum">Week '+ (weekNum - 1) +'</span> - <span class="startDate">'+startDate+'</span> - <span class="endDate">'+endDate+'</span> | <span class="remove">X Remove</span></div>');

}

// disable the dates on the calendar
function disableDates(startDate, endDate){


}

// enable the dates on the calendar
function enableDates(startDate, endDate){


}

简而言之，这里有两个问题...如何在将日期选择器添加到页面后禁用日期。其次，我如何禁用两个日期之间的范围，因为它看起来像 beforeShowDay 方法需要一个日期数组而不是一个范围。

Answer 1

But how would I disable a range of dates? As I only have the start and end dates.

一种方法是根据您拥有的开始日期和结束日期创建一个日期数组。在 beforeShowDay 中使用该数组来禁用范围。

演示:http://jsfiddle.net/abhitalks/FAt66/1/

例如，JS 的相关部分:

var startDate = "2014-06-15", // some start date
    endDate  = "2014-06-21",  // some end date
    dateRange = [];           // array to hold the range

// populate the array
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
    dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
}

// use this array 
beforeShowDay: function (date) {
    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
    return [dateRange.indexOf(dateString) == -1];
}

现在，您可以在选择日期时设置 startDate 和 endDate。在我上面链接的示例 fiddle 中，只要在两个顶部输入中选择了日期，就会设置开始日期和结束日期。在第二个输入中选择日期时填充数据数组。

注意:上面的示例是附加的，即每次您选择一个新范围时，它都会作为禁用日期添加到目标中。如果您想在指定新范围之前清除现有的禁用范围，那么您可以执行 destroy 并重新附加日期选择器。 (并且还重置了 dateRange 数组)

演示 2:http://jsfiddle.net/abhitalks/FAt66/3/

JS 的相关部分:

$("#dt").datepicker("destroy");
$("#dt").datepicker({ 
    dateFormat : 'yy-mm-dd',
    beforeShowDay: disableDates
});

var disableDates = function(dt) {
    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', dt);
    return [dateRange.indexOf(dateString) == -1];
}

---

查看您的实际代码，您只需要:

onSelect: function(dateText, inst) { 
    var date = $(this).datepicker('getDate');
    startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
    endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
    var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

    addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

    for (var d = new Date(startDate);
        d <= new Date(endDate);
        d.setDate(d.getDate() + 1)) {
            dateRange.push($.datepicker.formatDate('dd/mm/yyyy', d));
    }

    selectCurrentWeek();
},
beforeShowDay: disableDates,
    ...

这将继续将新选择的日期范围添加到数组中，并继续禁用。但是，请注意，当已选择的一周被删除时，您将需要一条逃生路线。在这种情况下，您可以使用多个阵列，这些阵列可以合并为一个主阵列。