且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在jQuery datepicker UI上禁用/启用所选日期范围

更新时间:2022-03-01 06:39:18


但是如何禁用一系列日期?因为我只有开始和
结束日期。

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

一种方法可能是创建一个基于开始和结束你所拥有的日期。在 beforeShowDay 中使用该数组来禁用范围。

One way could be to create an array of dates based on the start and end dates that you have. Use that array in beforeShowDay to disable the range.

演示: 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 每当选择日期时。在与上述链接的示例小提琴中,每当在两个顶部输入中选择日期时,开始和结束日期都会设置。当在第二个输入中选择日期时,填充数据数组。

Now, you could set startDate and endDate whenever a date is selected. In the example fiddle I linked to above, the start and end dates are set whenever a date is selected in the two top inputs. The data array is populated when date is selected in the second input.

注意:上述示例是加法的,即每次选择一个新的范围,作为禁用日期添加到目标中。如果要在指定新范围之前清除现有的禁用范围,则可以执行 destroy 并重新连接datepicker。 (还要重设dateRange数组)

Note: The above example is additive, i.e. everytime you select a new range it gets added as disabled dates into the target. If you want to clear the existing disabled range before specifying a new range, then you could do a destroy and reattach the datepicker. (And also reset the dateRange array)

演示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];
}






查看您的实际代码所有你需要的是:


Looking at your actual code, all you need is this:

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,
    ...

这将不断地将新选择的日期范围添加到阵列中,并且将加强地禁用。但是,请注意,删除已选择的周后,您将需要一条逃生路线。在这种情况下,您可以使用可以合并到一个主阵列中的多个阵列。

This will keep adding the newly selected date ranges to the array and will additively keep on disabling. But, be cautioned that you will need an escape route when an already selected week is removed. In that case, you may work with multiple array which can be coalesced into one master array.