Переместить даты, но пропустить отключенные даты в запросе выбора даты 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

Вы можете проверить дату отключения в ваших следующих / предыдущих обработчиках событий и продолжать добавлять / вычитать день, пока не пройдете даты отключения. Например:

$('.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

Answer 2

Сначала проверьте дату не в disabledDates перед setDate для datepicker.

Просто проверьте дату не в 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
}

, затем l oop, пока выбранная дата не будет включена в 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));
 });