jquery ui datepicker - beforeShowDay not working when I first open the clendar

Question

it looks like the beforeShowDay doesn't work the first time I open the calendar on the current month.

I'm having the jquery ui datepicker with few active days each month. when I refresh the website and open the calendar for the first time, i'll see that all the dates in January are unactive but if I move to February and go back to Jan i'll see the active days (as I should the first time I opened it).

$("#divDatePicker").datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function(value, date) { 
        //chose date
        $("#search_term").val( $("#search_term").val() + value );
        $("#divDatePicker").hide(); 
    },
    beforeShowDay: function(d) {        
        var year = d.getFullYear(),
            month = ("0" + (d.getMonth() + 1)).slice(-2),
            day = ("0" + (d.getDate())).slice(-2);

        var formatted = year + '-' + month + '-' + day;

        if ($.inArray(formatted, availableDates) != -1) {
            return [true, "","Available"]; 
        } else{
            return [false,"","unAvailable"]; 
        }
    }
});

any ideas?

Welcome to Stack Overflow. Where is `availableDates` defined? Please provide a [mcve]. — Twisty, Jan 05 '23 at 17:19

score 0 · Accepted Answer · answered Jan 06 '23 at 02:01

Consider the following example.

$(function() {

  var availableDates = ["23-01-21", "23-01-22"];

  $("#divDatePicker").datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function(value, date) {
      //chose date
      var temp = $("#search_term").val();
      temp += value;
      $("#search_term").val(temp);
      $("#divDatePicker").hide();
    },
    beforeShowDay: function(d) {
      var formatted = $.datepicker.formatDate("y-mm-dd", d);
      if (availableDates.indexOf(formatted) != -1) {
        return [true, "", "Available"];
      } else {
        return [false, "", "unAvailable"];
      }
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>


<div id="divDatePicker"></div>

<input type="text" id="search_term" />

You can use the utility $.datepicker.formatDate( format, date, options ) to format a Date into a String. You stated you wanted YY-MM-DD, so "23-01-05" for today. This must match with some of your availableDates elements, which I am assuming is an array.

jquery ui datepicker - beforeShowDay not working when I first open the clendar

1 Answers1