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

所以我有以下演示http://dev.driz.co.uk/week.html ，它显示了一个jQuery UI datepicker，它有一年中每个月的多个实例。

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

我想要做的是在用户选择日期后禁用日期，这样他们就可以在日历选择器上看到已选择的日期（并且还可以阻止他们多次添加相同的日期范围）。

但是我不知道从哪里开始…我已经创建了一些启用和禁用日期函数但不知道如何使用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 ] } }); 

但是我如何禁用一系列日期？ 因为我只有开始和结束日期。 在我的例子中，我可以在页面上的datepicker之后调用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('
Week '+ (weekNum - 1) +' - '+startDate+' - '+endDate+' | X Remove
'); } // disable the dates on the calendar function disableDates(startDate, endDate){ } // enable the dates on the calendar function enableDates(startDate, endDate){ } 

简而言之，这里有两个问题…如何在将datepicker添加到页面后禁用日期。 第二，如何禁用两个日期之间的范围，因为看起来像beforeShowDay方法需要一个日期数组而不是一个范围。

Answer 1

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

一种方法是根据您拥有的开始日期和结束日期创建日期数组。 在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 。 在上面链接的示例小提琴中，只要在两个顶部输入中选择了日期，就会设置开始日期和结束日期。 在第二个输入中选择日期时，将填充数据数组。

注意 ：上面的示例是附加的，即每次选择新范围时，它都会被添加为目标中的禁用日期。 如果要在指定新范围之前清除现有的禁用范围，则可以执行destroy并重新连接datepicker。 （还要重置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, ... 

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