JQuery datepicker: Disable dates explicitly enabled

user_13885342 0
Viewed 528

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];
  }
}
datepicker jquery javascript
2 Answers

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">

user_2155520

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/

user_77437050
Related