移動日期但跳過日期選擇器 j 查詢中禁用的日期？

Question

我想跳過日期選擇器中禁用的日期，

<div id="picker"></div>

<br/><br/>

<button class="next-day">Next</button>
<button class="prev-day">Previous</button>

這是我關於禁用日期的代碼：

var disabledDates = ["2020-03-28","2020-03-27","2020-03-26"]
 $('#picker').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ disabledDates.indexOf(string) == -1 ]
    }
});

我的日期選擇器代碼

$('#picker').datepicker();

$('.next-day').on("click", function () {
    var date = $('#picker').datepicker('getDate');
    date.setTime(date.getTime() + (1000*60*60*24))
    $('#picker').datepicker("setDate", date);
});

$('.prev-day').on("click", function () {
    var date = $('#picker').datepicker('getDate');
    date.setTime(date.getTime() - (1000*60*60*24))
    $('#picker').datepicker("setDate", date);
});

這是我的小提琴http://jsfiddle.net/3zoat0u6/1/

Answer 1

首先，在 setDate 到 datepicker 之前檢查不在disabledDates中的日期。

只需通過格式date到字符串格式 'yyyy-mm-dd' ( https://stackoverflow.com/a/3552493/9002484 ) 來檢查不在disabledDates的date ，然后使用包含功能進行檢查。

dtf = new Intl.DateTimeFormat('en', { year: 'numeric', month: '2-digit', day: '2-digit' }) 
let [{ value: mo },,{ value: da },,{ value: ye }] = dtf.formatToParts(date)
let formatedDate = `${ye}-${mo}-${da}`
if(!disabledDates.includes(formatedDate)){
// not include in disabledDates; so assign date
}else{
// include in disabledDates; do nothing
}

然后循環直到所選日期不包含在 disabledDates 中

$('.next-day').on("click", function() {
   var date = $('#picker').datepicker('getDate');

   while (true) {
     date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
     dtf = new Intl.DateTimeFormat('en', {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit'
     })
     let [{
       value: mo
     }, , {
       value: da
     }, , {
       value: ye
     }] = dtf.formatToParts(date)
     let formatedDate = `${ye}-${mo}-${da}`
     if (!disabledDates.includes(formatedDate)) {
       break;
     }
   }

   $('#picker').datepicker("setDate", date);
 });

您可以創建函數來查找不在disabledDates下一個日期，代碼將是這樣的。

function findNextDateBySkipedDate(startDate, operation, skipedDates) {
   let date = new Date(startDate.getTime()); // copy date to new object
   while (true) {
     if (operation === "+") {
       date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
     } else if (operation === "-") {
       date.setTime(date.getTime() - (1000 * 60 * 60 * 24))
     } else {
       break;
     }

     dtf = new Intl.DateTimeFormat('en', {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit'
     })
     let [{
       value: mo
     }, , {
       value: da
     }, , {
       value: ye
     }] = dtf.formatToParts(date)
     let formatedDate = `${ye}-${mo}-${da}`
     if (!skipedDates.includes(formatedDate)) {
       break;
     }
   }

   return date;
 }

 $('.next-day').on("click", function() {
   var date = $('#picker').datepicker('getDate');

   $('#picker').datepicker("setDate", findNextDateBySkipedDate(date, "+", disabledDates));


 });

 $('.prev-day').on("click", function() {
   var date = $('#picker').datepicker('getDate');
   $('#picker').datepicker("setDate", findNextDateBySkipedDate(date, "-", disabledDates));
 });

Answer 2

您可以在下一個/上一個事件處理程序中檢查禁用日期，並繼續添加/減去一天，直到超過禁用日期。 例如：

$('.next-day').on("click", function () {
    var date = $('#picker').datepicker('getDate');
    do {
        date.setTime(date.getTime() + (1000*60*60*24));
      var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
    }
    while (disabledDates.indexOf(string) >= 0) ;
    $('#picker').datepicker("setDate", date);
});

更新了 JSfiddle