title: Jquery datepicker beforeShowDay still clickable even all days should already be not selectable
body: <p><a href="https://i.stack.imgur.com/P3mII.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P3mII.png" alt="enter image description here"></a></p>
  
  <p>I am using jquery ui for datepicker and I am trying to disable some dates. I have searched that we can achieve this via beforeShowDay on datepicker initialisation. However I cant seem to make it work with the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
    $('.my-datepicker').datepicker({
      beforeShowDay: function(d){                                                               
                return [ false, "test-class", "Not available" ];
            }
        });
  }());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;input type="text" class="form-control my-datepicker" name="StartDate" id="StartDate"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am able to make it work in the snippet above but I really cannot understand why in my actual app the datepicker shows but all dates are still selectable.</p>
  
  <p>When I add a breakpoint on the beforeShowDay return the code does enter that function but still all days are selectable.</p>
  
  <p>I am running out of ideas so perhaps somebody have encountered a similar problem and can give some ideas where to look.</p>
  
  <pre><code>$(document).on('click', '.addEvent', function(){
  
                  var params = {
                      'SWFCustomerLocationID': $(this).data('swfcustlocid')
                  }
  
                  // Load the SWFCustomerDetails Modal
                  $.get(base_url + '/settings/components/createPickupOrDeliverySchedule.php', params, function(response){
                      $(document).find("#createPickupOrDeliveryScheduleForm").remove();
                      $(document).find('body').append(response.html);
                      $("#createPickupOrDeliveryScheduleForm").modal('show');
  
                      initializeInstrumentAccordion();
  
                      $('.chosen-select').chosen({width: '100%'});
  
                      var startDate = Date.parse(response.StartDate);
                      var endDate = Date.parse(response.EndDate);
  
                      $('#StartDate').datepicker({
                          startDate: new Date(startDate),
                          endDate: new Date(endDate),
                          dateFormat: 'yyyy-mm-dd',
                          // beforeShowDay: function(d){                                
                          //     var day = d.getDate();
  
                          //     if (day &lt; 10) {
                          //         day = "0" + day;
                          //     }
  
                          //     var month = d.getMonth() + 1;
                          //     if (month &lt; 10) {
                          //         month = "0" + month;
                          //     }
                          //     var year = d.getFullYear();
  
                          //     var dString = `${year}-${month}-${day}`;
                          //     var result = [ false, "", "Not available" ];
  
                          //     return result;
                          // }
                          beforeShowDay: function(d){                                
  
                              return [false, "", "Not available"];
                          }
                      });
                  });
              })
  </code></pre>