Move dates but skip the disabled dates in date picker j query?

Question

I want to skip the disabled dates in date picker,

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

<br/><br/>

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

This is my code on disabling dates:

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 ]
    }
});

My code for the date Picker

$('#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);
});

heres my fiddle http://jsfiddle.net/3zoat0u6/1/

score 0 · Answer 1 · answered Mar 14 '20 at 08:17

First, check date not in disabledDates before setDate to datepicker.

Simply check date not in disabledDates by format date to string format 'yyyy-mm-dd' (https://stackoverflow.com/a/3552493/9002484) and use include funtion to check like this.

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
}

then loop until the selected date not include in 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);
 });

You can make function that find next date that not in disabledDates and the code will be like this.

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));
 });

score 0 · Accepted Answer · answered Mar 14 '20 at 08:19

You can check for a disabled date in your next/previous event handlers and keep adding/subtracting a day until you have passed the disabled dates. For example:

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

Updated JSfiddle

Move dates but skip the disabled dates in date picker j query?

2 Answers2