CODEWITHSUNDEEP
javascriptjquerydatepicker
Troy
Troy

Reputation: 23

JQuery datepicker: Disable dates explicitly enabled

I have a datepicker that filters selectable dates. The requirements are only T, W, Th and one random Saturday a month. I have been able to accomplish this so far using the code below. Now my customer wants to be able to block out certain days on T, W, Th for various reasons (e.g. Holiday, Office closing, etc.). I am not sure how to accomplish this new request. Any ideas?

var SaturdayDate = ["7-25-2020", "8-15-2020" ];

$(function() {

  $("#my_date_picker").datepicker({
    beforeShowDay: function(dt) {
      return [dt.getDay() == 2 || dt.getDay() == 3 || dt.getDay() == 4 || enableThisDay(dt), ""];
    },
    minDate: 1
  });
});
            
function enableThisDay(date) {
  var oDate = $.datepicker.formatDate('m-d-yy', date);
  if ($.inArray(oDate, SaturdayDate) != -1) {
    return [true];
  }
}

Upvotes: 2

Views: 1550

Answers (2)

Heretic Monkey
Heretic Monkey

Reputation: 12113

I would keep any array to use Date objects rather than strings, eliminating formatting as a potential issue. I'd have two arrays: the "random" Saturdays and the holidays. Then I'd have a single function that checks if a date is enabled or not.

// Dates in JS use 0 indexed months, so 6 is July and 7 is August
var saturdays = [ new Date(2020, 6, 25), new Date(2020, 7, 15) ];
var holidays = [ new Date(2020, 6, 22), new Date(2020, 6, 2), new Date(2020, 7, 13) ];

$(function() {
  $("#my_date_picker").datepicker({
    beforeShowDay: enableThisDay,
    minDate: 1
  });
});

function enableThisDay(date) {
  var enabled = false;
  // if it's Tue, Wed, Thu, enable it
  if ([2,3,4].includes(date.getDay())) {
    enabled = true;
  }
  // if it's a holiday, disable it
  if (holidays.some(h => h.valueOf() === date.valueOf())) {
    enabled = false;
  }
  // if it's a saturday, disable it
  // note that if it's a saturday, that overrides holiday
  // if holidays override saturday, swap this statement with 
  // the one immediately above
  if (saturdays.some(s => s.valueOf() === date.valueOf())) {
    enabled = true;
  }
  return [enabled, ""];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylehseet">
<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylehseet">
<input type="text" id="my_date_picker">

Upvotes: 3

Dhruv Shah
Dhruv Shah

Reputation: 1651

Datepicker accepts an array of dates that need to be disabled.

You should be able to disable dates in the following way:

var dates = ["20/07/2020", "21/07/2020", "22/07/2020", "23/07/2020"];

function disableDates(date) {
  var string = jQuery.datepicker.formatDate('dd/mm/yy', date);

  let isDefaultDisabled = false;
  if(date.getDay()===2 || date.getDay()==3 || date.getDay()==4){
    isDefaultDisabled = true;
  }

  return [ isDefaultDisabled && dates.indexOf(string) == -1 ];
}


$(function() {
     $("#date").datepicker({
         beforeShowDay: disableDates
     });
});

Here is a working example: https://jsfiddle.net/idhruvs/wdkprbsL/9/

Upvotes: 2

Related Questions