Append to jquery ui datepicker beforeShowDay

Question

I have two steps in my logic; first show/hide a pre-defined range of dates, then to disable/enable specific days. I'm trying to figure out if it's possible to manipulate the existing beforeShowDay property of a JQuery UI Datepicker without destroying and re-creating it. In my example, the function "disableSpecificDay" is where I'd programmatically disable/enable dates. Any suggestions? All examples I can find assume that the specific days to disable/enable are already known.

 var myPicker = $("#myDatePicker"); var excludeDates = ["01/01/2018","04/06/2018","07/05/2018","30/07/2018"]; function disableExcludedDates(date) { for (var i = 0; i < excludeDates.length; i++) { if (new Date(excludeDates[i]).toString() == date.toString()) { return [false]; } } return [true]; } function weekends(action) { if (action === false) { // Hide weekends myPicker.focus(function() { $(".ui-datepicker-week-end").hide(); }); myPicker.blur(function() { $(".ui-datepicker-week-end").hide(); }); } else { // Show weekends myPicker.focus(function() { $(".ui-datepicker-week-end").show(); }); myPicker.blur(function() { $(".ui-datepicker-week-end").show(); }); } } function disableSpecificDay() { var dayNumber = $("#dayNumber").val(); myPicker.datepicker({ // Adjust beforeShowDay here? eg zero "0" will disable Sundays }); } $(function() { myPicker.datepicker( { numberOfMonths: 1, firstDay: 1, dateFormat: "dd/mm/yy", beforeShowDay: disableExcludedDates }); }); 

 br { line-height: 150%; } button, input { width: 130px; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="text" id="myDatePicker"> <button onclick="weekends(true)">Show Weekends</button> <button onclick="weekends(false)">Hide Weekends</button> <br /> <input type="text" id="dayNumber" placeholder="Digit 0-9"> <button onclick="disableSpecificDay()">Hide Specific Day</button> 

Answer 1

You can send a new function; yet I don't know that this is a good idea. For example:

function disableSpecificDay() {
  var dayNumber = $("#dayNumber").val();
  myPicker.datepicker("option", "beforeShowDay", function(){ });
}

I would create a constant variable that could be updated. Your disableExcludedDates() can check this and take action as needed.

 var myPicker = $("#myDatePicker"); var excludeDates = ["01/01/2018","04/06/2018","07/05/2018","30/07/2018"]; var disableDate = false; function disableExcludedDates(date) { if(disableDate){ if (new Date(disableDate).toString() == date.toString()){ return [false]; } } for (var i = 0; i < excludeDates.length; i++) { if (new Date(excludeDates[i]).toString() == date.toString()) { return [false]; } } return [true]; } function weekends(action) { if (action === false) { // Hide weekends myPicker.focus(function() { $(".ui-datepicker-week-end").hide(); }); myPicker.blur(function() { $(".ui-datepicker-week-end").hide(); }); } else { // Show weekends myPicker.focus(function() { $(".ui-datepicker-week-end").show(); }); myPicker.blur(function() { $(".ui-datepicker-week-end").show(); }); } } function disableSpecificDay() { if($("#dayNumber").val() != ""){ disableDate = $("#dayNumber").val(); } else { disableDate = false; } } $(function() { myPicker.datepicker( { numberOfMonths: 1, firstDay: 1, dateFormat: "dd/mm/yy", beforeShowDay: disableExcludedDates }); }); 

 br { line-height: 150%; } button, input { width: 130px; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="text" id="myDatePicker"> <button onclick="weekends(true)">Show Weekends</button> <button onclick="weekends(false)">Hide Weekends</button> <br /> <input type="text" id="dayNumber" placeholder="Digit 0-9"> <button onclick="disableSpecificDay()">Hide Specific Day</button> 

Alternatively, you can add this date to your excludeDates Array. Something like:

function disableSpecificDay() {
  excludeDates.push($("#dayNumber").val());
}

Hope that helps.