CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepicker
Hassan Elshazly Eida
Hassan Elshazly Eida

Reputation: 859

Jquery UI Datepicker disable specific days and all (Mondays&Tuesday)

I want to disable specific days and all (Mondays&Tuesday) for example 

 var array = ["2020-03-14","2020-03-15","2020-03-16"]

    $('#datepicker').datepicker({
        beforeShowDay: function(date){
              var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
              var day = date.getDay();
              if (day != 1 && day != 2)
                  return [true]
              else if  ( array.indexOf(string) == -1)
                  return [ true]
              else
                  return [ false]

        }
    });

but it disable only "2020-03-16" what's wrong ?

Upvotes: 0

Views: 212

Answers (1)

Twisty
Twisty

Reputation: 30899

Consider the following code.

jQuery(function($){
  var arr = [
    "2020-03-14",
    "2020-03-15",
    "2020-03-16"
  ];
  $('#datepicker').datepicker({
    beforeShowDay: function(dt){
      var dStr = $.datepicker.formatDate('yy-mm-dd', dt);
      var day = dt.getDay();
      var result = [false, ""];
      if (day != 1 && day != 2){
        result = [true, "available"];
      }
      if(arr.indexOf(dStr) >= 0){
        result = [true, ""];
      }
      return result;
    }
  });
});

beforeShowDay

A function that takes a date as a parameter and must return an array with:

  • [0]: true/false indicating whether or not this date is selectable

  • [1]: a CSS class name to add to the date's cell or "" for the default presentation

  • [2]: an optional popup tooltip for this date

https://api.jqueryui.com/datepicker/#option-beforeShowDay

You must return the right array.

Upvotes: 3

Related Questions