Jquery datepicker beforeShowDay still clickable even all days should already be not selectable

user_3709343 0
Viewed 1213

enter image description here

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:

$(function(){
  $('.my-datepicker').datepicker({
    beforeShowDay: function(d){                                                               
              return [ false, "test-class", "Not available" ];
          }
      });
}());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input type="text" class="form-control my-datepicker" name="StartDate" id="StartDate">

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.

When I add a breakpoint on the beforeShowDay return the code does enter that function but still all days are selectable.

I am running out of ideas so perhaps somebody have encountered a similar problem and can give some ideas where to look.

$(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 < 10) {
                        //         day = "0" + day;
                        //     }

                        //     var month = d.getMonth() + 1;
                        //     if (month < 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"];
                        }
                    });
                });
            })
jquery-ui-datepicker jquery-ui jquery javascript
3 Answers

You should firstly destroy then reinitialize datepicker. Can u put

$('#StartDate').datepicker("destroy");

before

  $('#StartDate').datepicker({
                        startDate: new Date(startDate),
                        endDate: new Date(endDate),
                        dateFormat: 'yyyy-mm-dd',
                        // beforeShowDay: function(d){                                
                        //     var day = d.getDate();

                        //     if (day < 10) {
                        //         day = "0" + day;
                        //     }

                        //     var month = d.getMonth() + 1;
                        //     if (month < 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"];
                        }
                    });

and for first initialize use it document ready 

$( document ).ready(function() {
  $('.my-datepicker').datepicker({
    beforeShowDay: function(d){              
    console.log("dsad")
              return [ true, "test-class", "Not available" ];
          }
      });
});

don't use with code below because it always calls for every open .

$(function(){
  $('.my-datepicker').datepicker({
    beforeShowDay: function(d){                                                               
              return [ true, "test-class", "Not available" ];
          }
      });
}());
user_25762540

You need some sort of condition to ensure that you have either a true or false result in your Array.

For example, if you want to make Saturday or Sunday unselectable, you can use .getDay() to find the day of the Week. Consider the following code:

$(function() {
  $('.my-datepicker').datepicker({
    beforeShowDay: function(d) {
      var result = [true, "good day", "Available"];
      if (d.getDay() == 0 || d.getDay() == 6) {
        result = [false, "bad day", "Not available"];
      }
      return result;
    }
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input type="text" class="form-control my-datepicker" name="StartDate" id="StartDate">

As you can see, only Days of the Week can be selected. Your code has no condition, so all days result in False. You need to determine which days should be True or False.

user_4633190

Thank you all for trying to help.

Turns out that the datepicker that is used is bootstrap-datepicker. I got confused as both jquery-ui and bootstrap-datepicker were added as dependency and thought the datepicker I am using is from the jquery-ui.

Here's the correct reference that I should have used: https://bootstrap-datepicker.readthedocs.io/en/stable/options.html#beforeshowday

Hopefully this will also help somebody who might encounter the same problem.

user_37093430
Related