[英]How to disable several date using isInvalidDate in date range picker
我想在日期范圍選擇器中禁用多個日期。
我可以從2017年10月10日到2017年10月15日停用,如下所示:
var cekA = document.getElementById('HF_StartDateBlockMasterPage').value;
var cekB = document.getElementById('HF_EndDateBlockMasterPage').value;
$('#daterange').daterangepicker({
isInvalidDate: function (date) {
var formatted = date.format('YYYY-MM-DD');
if (date >= moment(cekA) && date <= moment(cekB)) {
return true;
}
}
});
該代碼工作正常。
但是,如果我想在2017年10月10日至2017年10月15日以及從2017年10月25日至2017年10月30日再次禁用該怎么辦? 例子我的HTML
您只需要向isInvalidDate回調添加更多條件,每個條件代表要禁用的日期或日期塊。
例如,您可以編寫:
jQuery(function($) {
var a = moment("2017-10-10");
var b = moment("2017-10-15");
var x = moment("2017-10-25");
var y = moment("2017-10-30");
$("#daterange").daterangepicker({
isInvalidDate: function(date) {
if (date >= a && date <= b) {
return true;
}
if(date >= x && date <= y) {
return true;
}
return false;
}
});
});
或簡化:
jQuery(function($) {
var a = moment("2017-10-10");
var b = moment("2017-10-15");
var x = moment("2017-10-25");
var y = moment("2017-10-30");
$("#daterange").daterangepicker({
isInvalidDate: function(date) {
return (date >= a && date <= b) || (date >= x && date <= y);
}
});
});
如果您有許多日期范圍,則可以這樣寫:
jQuery(function($) {
$("#daterange").daterangepicker({
isInvalidDate: function(date) {
var dateRanges = [
{ 'start': moment('2017-10-10'), 'end': moment('2017-10-15') },
{ 'start': moment('2017-10-25'), 'end': moment('2017-10-30') },
{ 'start': moment('2017-11-10'), 'end': moment('2017-11-15') },
{ 'start': moment('2017-11-25'), 'end': moment('2017-11-30') },
{ 'start': moment('2017-12-10'), 'end': moment('2017-12-15') },
{ 'start': moment('2017-12-25'), 'end': moment('2017-12-30') },
{ 'start': moment('2018-01-10'), 'end': moment('2018-01-15') },
{ 'start': moment('2018-01-25'), 'end': moment('2018-01-30') },
{ 'start': moment('2018-02-10'), 'end': moment('2018-02-15') },
{ 'start': moment('2018-02-25'), 'end': moment('2018-02-30') }
];
return dateRanges.reduce(function(bool, range) {
return bool || (date >= range.start && date <= range.end);
}, false);
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.