CODEWITHSUNDEEP
javascriptjquerydatepicker
Kevin Verhoeven
Kevin Verhoeven

Reputation: 189

JS Datepicker: Disable past dates + specific days of the week + specific dates

I have a datepicker in JS where I disabled passed dates AND only allow saturdays like this:

$(document).ready(function(){
    $("#aankomstdatum").datepicker({
        dateFormat: "dd-mm-yy",
        numberOfMonths:2,
        minDate: 0,
        beforeShowDay: function(date){
        var day = date.getDay();
        return [day == 6];
    }});
});

I also have a code that lets me disable specific dates like this:

 /** Days to be disabled as an array */
var disableddates = ["26-05-2018"];

function DisableSpecificDates(date) {

 var m = date.getMonth();
 var d = date.getDate();
 var y = date.getFullYear();

 // First convert the date in to the mm-dd-yyyy format 
 // Take note that we will increment the month count by 1 
 var currentdate = (m + 1) + '-' + d + '-' + y ;

  // We will now check if the date belongs to disableddates array 
 for (var i = 0; i < disableddates.length; i++) {

 // Now check if the current date is in disabled dates array. 
 if ($.inArray(currentdate, disableddates) != -1 ) {
 return [false];
 }
 }
}

With adding this, it works:

beforeShowDay: DisableSpecificDates

The issue I have is that i can't make both work. I'm not sure How can disable the past dates and all days except saturdays AND also disable specific given dates in the array, while seperatly they do work. I always get syntax errors when trying for example:

    beforeShowDay: DisableSpecificDates, function(date){
    var day = date.getDay();
    return [day == 6];
}});

Is this possible to do?

Upvotes: 0

Views: 737

Answers (1)

nrg
nrg

Reputation: 518

Yes, it's possible to achieve this. You want to create one function and return [false] from it if:

  1. date is a Saturday or
  2. date is contained within disableddates array

Here's the example:

var disableddates = ["26-04-2018"];

function DisableDates(date) {
  var selectable = !isSaturday(date) && !isDateDisabled(date);

  return [selectable];
}

function isSaturday(date) {
  var day = date.getDay();

  return day === 6;
}

function isDateDisabled(date) {
  var m = date.getMonth() + 1;
  var d = date.getDate();
  var y = date.getFullYear();

  // First convert the date in to the dd-mm-yyyy format
  if(d < 10) d = '0' + d;
  if(m < 10) m = '0' + m;

  var currentdate = d + '-' + m + '-' + y;

  // Check if disableddates array contains the currentdate
  return disableddates.indexOf(currentdate) >= 0;
}

And then just pass DisableDates function as the value of your beforeShowDay option:

$("#aankomstdatum").datepicker({
  dateFormat: "dd-mm-yy",
  numberOfMonths:2,
  minDate: 0,
  beforeShowDay: DisableDates
});

Upvotes: 1

Related Questions