Flatpickr:当触发 onValueUpdate 时,按功能禁用的日期变为启用
Flatpickr: disabled dates by function turns enabled when onValueUpdate is fired
我的目的是:
Select 多个日期以便 select 假期最多 10 天,不允许用户 select 早于今天或周末的日期。
当我用多个 selection 和禁用的周末初始化 flatpicker 时,一切看起来都正常,周末被禁用,比今天早的日期也被禁用,我可以 select 多个日期.. .
但是,当我点击一个日期时,禁用的周末会变为启用。
请检查这个 jsfiddle 以查看我尝试过的内容
https://jsfiddle.net/seba1rx/vj695bL3/
这是一个错误还是我在这里遗漏了什么???
var nr_holidayDays = 10;
$("#dateField").flatpickr({
mode: "multiple",
minDate: "today",
dateFormat: "d-m-Y",
locale: {
"firstDayOfWeek": 1 // start week on Monday
},
disable: [
function(date) {
// return true to disable
return (date.getDay() === 0 || date.getDay() === 6);
}
],
onValueUpdate: function(selectedDates, dateStr, instance){
var selectedDatesStr = selectedDates.reduce(function(acc, ele) {
var str = flatpickr.parseDate(ele, "d-m-Y");
acc = (acc == "") ? str : acc + ";" + str;
return acc;
}, "");
instance.set("enable", [function(date) {
if (selectedDates.length > nr_holidayDays) {
var currDateStr = flatpickr.parseDate(date, "Y-m-d");
var x = selectedDatesStr.indexOf(currDateStr);
return x != -1;
} else {
return true;
}
}]);
}
});
我想要的:
-能够select多个日期。
-无法 select 早于今天的日期。
-无法select周末(周六和周日)。
-能够 select 最多天数(在本例中为 10 天)。
-如果达到最大天数 select,则其余天数将被禁用。
-为了 select 另一个日期,当最大天数被 selected 时,deselect 一天和从周一到周五的几天轮流启用,周末应该被禁用, 早于今天的日期应该被禁用。
我尝试了其他事件 (onChange) 并控制了数组中的日期,所以这是一个可以执行所有我想要的工作的脚本
这是一个 jsfiddle:
https://jsfiddle.net/seba1rx/mz30j9xw/7/)
var nr_holidayDays = 4;
$('#dateField').flatpickr({
mode: 'multiple',
allowInput: true,
minDate: 'today',
dateFormat: 'd-m-Y',
locale: {
'firstDayOfWeek': 1 // start week on Monday
},
disable: [
function(date) {
// return true to disable
return (date.getDay() === 0 || date.getDay() === 6);
}
],
onChange: function(selectedDates, dateStr, instance){
var selectedDate = instance.selectedDateElem.dateObj;
var int_month = selectedDate.getMonth()+1;
var str_month = int_month < 10? '0' + int_month.toString() : int_month.toString();
var int_day = selectedDate.getDate();
var str_day = int_day < 10? '0' + int_day.toString() : int_day.toString();
var thisDate = selectedDate.getFullYear() + '-' + str_month + '-' + str_day;
//console.log('slected date: '+thisDate);
var_arr_dates = [];
selectedDates.forEach(function(iteratedDate){
var int_day = iteratedDate.getDate();
var str_day = int_day < 10? '0' + int_day.toString() : int_day.toString();
var int_month = iteratedDate.getMonth()+1;
var str_month = int_month < 10? '0' + int_month.toString() : int_month.toString();
var thisDate = str_day + '-' + str_month + '-' + iteratedDate.getFullYear();
var_arr_dates.push(String(thisDate));
});
var selectedDatesStr = var_arr_dates.reduce(function(accumulator, element) {
accumulator = (accumulator == '') ? element : accumulator + ';' + element;
return accumulator;
}, '');
instance.set('enable', [
function(date) {
if (selectedDates.length >= nr_holidayDays ) {
var int_month = date.getMonth()+1;
var str_month = int_month < 10? '0' + int_month.toString() : int_month.toString();
var int_day = date.getDate();
var str_day = int_day < 10? '0' + int_day.toString() : int_day.toString();
var evaluatedDate = str_day + '-' + str_month + '-' + date.getFullYear();
var x = selectedDatesStr.indexOf(evaluatedDate);
console.log('indexof: '+evaluatedDate+' is '+x);
return x != -1;
} else {
return !(date.getDay() === 0 || date.getDay() === 6);
}
}
]);
}
});
我的目的是:
Select 多个日期以便 select 假期最多 10 天,不允许用户 select 早于今天或周末的日期。
当我用多个 selection 和禁用的周末初始化 flatpicker 时,一切看起来都正常,周末被禁用,比今天早的日期也被禁用,我可以 select 多个日期.. .
但是,当我点击一个日期时,禁用的周末会变为启用。
请检查这个 jsfiddle 以查看我尝试过的内容
https://jsfiddle.net/seba1rx/vj695bL3/
这是一个错误还是我在这里遗漏了什么???
var nr_holidayDays = 10;
$("#dateField").flatpickr({
mode: "multiple",
minDate: "today",
dateFormat: "d-m-Y",
locale: {
"firstDayOfWeek": 1 // start week on Monday
},
disable: [
function(date) {
// return true to disable
return (date.getDay() === 0 || date.getDay() === 6);
}
],
onValueUpdate: function(selectedDates, dateStr, instance){
var selectedDatesStr = selectedDates.reduce(function(acc, ele) {
var str = flatpickr.parseDate(ele, "d-m-Y");
acc = (acc == "") ? str : acc + ";" + str;
return acc;
}, "");
instance.set("enable", [function(date) {
if (selectedDates.length > nr_holidayDays) {
var currDateStr = flatpickr.parseDate(date, "Y-m-d");
var x = selectedDatesStr.indexOf(currDateStr);
return x != -1;
} else {
return true;
}
}]);
}
});
我想要的:
-能够select多个日期。
-无法 select 早于今天的日期。
-无法select周末(周六和周日)。
-能够 select 最多天数(在本例中为 10 天)。
-如果达到最大天数 select,则其余天数将被禁用。
-为了 select 另一个日期,当最大天数被 selected 时,deselect 一天和从周一到周五的几天轮流启用,周末应该被禁用, 早于今天的日期应该被禁用。
我尝试了其他事件 (onChange) 并控制了数组中的日期,所以这是一个可以执行所有我想要的工作的脚本
这是一个 jsfiddle:
https://jsfiddle.net/seba1rx/mz30j9xw/7/)
var nr_holidayDays = 4;
$('#dateField').flatpickr({
mode: 'multiple',
allowInput: true,
minDate: 'today',
dateFormat: 'd-m-Y',
locale: {
'firstDayOfWeek': 1 // start week on Monday
},
disable: [
function(date) {
// return true to disable
return (date.getDay() === 0 || date.getDay() === 6);
}
],
onChange: function(selectedDates, dateStr, instance){
var selectedDate = instance.selectedDateElem.dateObj;
var int_month = selectedDate.getMonth()+1;
var str_month = int_month < 10? '0' + int_month.toString() : int_month.toString();
var int_day = selectedDate.getDate();
var str_day = int_day < 10? '0' + int_day.toString() : int_day.toString();
var thisDate = selectedDate.getFullYear() + '-' + str_month + '-' + str_day;
//console.log('slected date: '+thisDate);
var_arr_dates = [];
selectedDates.forEach(function(iteratedDate){
var int_day = iteratedDate.getDate();
var str_day = int_day < 10? '0' + int_day.toString() : int_day.toString();
var int_month = iteratedDate.getMonth()+1;
var str_month = int_month < 10? '0' + int_month.toString() : int_month.toString();
var thisDate = str_day + '-' + str_month + '-' + iteratedDate.getFullYear();
var_arr_dates.push(String(thisDate));
});
var selectedDatesStr = var_arr_dates.reduce(function(accumulator, element) {
accumulator = (accumulator == '') ? element : accumulator + ';' + element;
return accumulator;
}, '');
instance.set('enable', [
function(date) {
if (selectedDates.length >= nr_holidayDays ) {
var int_month = date.getMonth()+1;
var str_month = int_month < 10? '0' + int_month.toString() : int_month.toString();
var int_day = date.getDate();
var str_day = int_day < 10? '0' + int_day.toString() : int_day.toString();
var evaluatedDate = str_day + '-' + str_month + '-' + date.getFullYear();
var x = selectedDatesStr.indexOf(evaluatedDate);
console.log('indexof: '+evaluatedDate+' is '+x);
return x != -1;
} else {
return !(date.getDay() === 0 || date.getDay() === 6);
}
}
]);
}
});