Disable array of dates with Jquery datepicker Not Working - dates will not disable

Question

I have an array of dates pulled from a database that I am trying to disable on the datepicker. The array below is the results from my database. Using Jquery UI datepicker. Disable array of Dates as guidance, I tried to disable the dates from my array. My page is connected to <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> and my own .js file.

From my HTML page: <input id="resDate">

From my JavaScript file:

$(document).ready(function () {
blackoutDates(); 
});
function blackoutDates() {
var unavailableDates = ["10/27/2018", "11/8/2018", "4/25/2018"]
$(function () {
        $("#resDate").datepicker({
            todayHighlight: true,
            beforeShowDay: function (date) {
                var string = jQuery.datepicker.formatDate('mm-dd-yy', date);
                return [unavailableDates.indexOf(string) == -1]
            }
        });
    });
}

On JSFiddle the result is that the dates are completely unaffected (i.e. none are disabled). On my page, I received the error "Uncaught TypeError: Cannot read property 'formatDate' of undefined". Since that function did not work, I also tried:

$(document).ready(function () {
blackoutDates(); 
});
function blackoutDates() {
var unavailableDates = ["10/27/2018", "11/8/2018", "4/25/2018"]
$(function () {
        $("#resDate").datepicker({
            todayHighlight: true,
            beforeShowDay: function unavailable(date) {
                dmy = date.getDate() + "/" + (date.getMonth() + 1) + "/" + 
date.getFullYear();
                if ($.inArray(dmy, unavailableDates) == -1) {
                    return [true, "","Available"];
                } else {
                    return [false, "", "Unavailable"];
                }
            }
        });
    });
}

This did not disable any dates on both my page and JSFiddle. When I step through it while debugging with Chrome, the loop breaks after May 5,2018. Maybe it is having issues because it did not reach all of my array dates?

I have really confused myself. All advice is appreciated! Thank you!

Answer 1

Your first solution:

jQuery.datepicker.formatDate('mm-dd-yy', date) return mm/dd/yyyy, but the element of var unavailableDates is like "4/25/2018".

Your second solution:

your string format is different with var unavailableDates. one is mm/dd/yyyy, the other one is dd/mm/yyyy.

After fixed that, your codes should work.

Perhaps you already knew, beforeShowDay need to return one array:

As API defines:

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

And another point is each element of var unavailableDates is string. but the parameter of beforeShowDay is one date object, I prefer to predefining each element of var unavailableDates with new Date()

Then below is my solution

1. change each element of var unavailableDates to Date object. like new Date(2018, 09, 27)

2. get new Set() from var unavailableDates, then just simple check by .has() whether dateStr existes in that set(). (Also you can use Array.filter to check whether the date is unselectable). If true, return `[false, 'your css class', 'your tooltip'], if false, return [true,'',null]

PS: use Set(), we can avoid loop the array again and again, it will improve the efficiency a lot.

3. add one CSS class which is in var unavailableDates, you can customize the CSS=.disable-day by yourself.

Update: Added sample codes for .Net.

Below is the working sample:

$(document).ready(function () {
   blackoutDates(); 
});
function blackoutDates() {
    //assuming <%=DateTimeText%> is one string like mm-dd-yyyy;mm-dd-yyyy
    var unavailableAspxDatesString = '10-27-2018;11-08-2018;04-25-2018'   //= '<%=DateTimeText%>'
    let unavailableDateSet = new Set(unavailableAspxDatesString.split(';'))
    /*var unavailableDates = [new Date(2018, 09, 27), new Date(2018, 10, 08), new Date(2018, 03, 25)]
    let unavailableDateSet = new Set(unavailableDates.map(function(item){
      return jQuery.datepicker.formatDate('mm-dd-yy', item)
    }))*/
  $(function () {
      $("#resDate").datepicker({
          todayHighlight: true,
          beforeShowDay: function (calDate) {
              return unavailableDateSet.has(jQuery.datepicker.formatDate('mm-dd-yy', calDate)) ? [false, 'disable-day', 'no available day!!!'] : [true, '','']
              /*
              return unavailableDates.filter(function(item){
                return item.getTime()==calDate.getTime()}).length > 0 ? [false, 'disable-day',                     'no available day!!!'] : [true, '','']*/
              
          }
      });
  });
}

.disable-day{
  background-color:red;
}

<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 id="resDate">