[英]Disable/Enable selected date range on jQuery datepicker UI
所以我有以下演示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 方法需要一个日期数组而不是一个范围。
但是我将如何禁用一系列日期? 因为我只有开始和结束日期。
一种方法是根据您拥有的开始日期和结束日期创建一组日期。 在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
并重新附加日期选择器。 (并且还重置了 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,
...
这将继续将新选择的日期范围添加到数组中,并将继续禁用。 但是,请注意,当已选择的一周被删除时,您将需要一条逃生路线。 在这种情况下,您可以使用多个阵列,这些阵列可以合并为一个主阵列。
如果需要禁用日期列表,或者在任何预订类型的项目中,我们必须在整个过程中禁用某些日期。 所以你可以使用以下代码,
$(function() {
//This array containes all the disabled array
datesToBeDisabled = ["2019-03-25", "2019-03-28"];
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
minDate : 0,
todayHighlight: 1,
beforeShowDay: function (date) {
var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [datesToBeDisabled.indexOf(dateStr) == -1];
},
});
});
我使用了所有解决方案但没有奏效,但我对常见的 jquery.datepick.js 进行了更改
现有的 _isSelectable 构造函数
_isSelectable: function(elem, date, onDate, minDate, maxDate) {
var dateInfo = (typeof onDate === 'boolean' ? {selectable: onDate} :
(!$.isFunction(onDate) ? {} : onDate.apply(elem, [date, true])));
//This function is modified by Savata to Block fridays on homepage
return (dateInfo.selectable !== false) &&
(!minDate || date.getTime() >= minDate.getTime()) &&
(!maxDate || date.getTime() <= maxDate.getTime());
}
变成
_isSelectable: function(elem, date, onDate, minDate, maxDate) {
var dateInfo = (typeof onDate === 'boolean' ? {selectable: onDate} :
(!$.isFunction(onDate) ? {} : onDate.apply(elem, [date, true])));
return (dateInfo.selectable !== false) &&
(!minDate || date.getTime() >= minDate.getTime()) &&
(!maxDate || date.getTime() <= maxDate.getTime()) && date.getDay() != 5;
/*添加最后一个条件 date.getDay() != 5 to block friday 在你的情况下相应地更改为 sunday = 0 to saturday = 6 */ }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.