在 jQuery 日期选择器 UI 上禁用/启用选定的日期范围 [英] Disable/Enable selected date range on jQuery datepicker UI

问题描述

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

So I have the following demo http://dev.driz.co.uk/week.html that shows a jQuery UI datepicker that has multiple instances for each month of the year.

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

I've modified it so that the user selects entire weeks and then start and end dates for those weeks are stored on the right hand sidebar with a week number.

我想要做的是在用户选择日期后禁用日期，以便他们可以在日历选择器上看到已选择的日期(并防止他们多次添加相同的日期范围).

What I want to do is disable the dates once the user has selected them so they can see on the calender picker what dates have been selected (and also prevent them from adding the same date range more than once).

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

However I don't know where to start with this... I've created some enable and disable date functions but don't know how to actually disable the dates using the beforeShowDay method.

例如:

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 吗?以及如何重新启用日期?

But how would I disable a range of dates? As I only have the start and end dates. And can I call the beforeShowDay AFTER the datepicker is on the page like in my example? AND how can I then re-enable the dates?

代码如下:

$(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 方法需要一个日期数组而不是一个范围.

推荐答案

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

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 并重新附加日期选择器.(并且还重置了 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.

这篇关于在 jQuery 日期选择器 UI 上禁用/启用选定的日期范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！