ShowDay之前的jquery datepicker仍然可以单击，即使不是所有的日子也都可以选择

Question

我正在将jquery ui用于日期选择器，并且我试图禁用某些日期。我搜索了可以通过datepicker初始化之前的beforeShowDay实现此目的。但是我似乎无法使其与以下代码一起使用：

$(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">

我能够使它在上面的代码段中工作，但我真的不明白为什么在我的实际应用程序中会显示日期选择器，但仍可以选择所有日期。

当我在beforeShowDay返回上添加一个断点时，代码确实输入了该函数，但仍然可以选择整天。

我的想法用光了，所以也许有人遇到了类似的问题，可以提出一些想法去寻找。

$(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"];
                        }
                    });
                });
            })

Answer 1

您应该先销毁然后重新初始化日期选择器。你可以放

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

之前

  $('#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"];
                        }
                    });

并且首先初始化使用它准备好文档

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

不要与下面的代码一起使用，因为它总是要求每次打开。

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

Answer 2

您需要某种条件来确保数组中有true或false结果。

例如，如果要取消选择星期六或星期日，则可以使用.getDay()查找星期几。考虑以下代码：

$(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">

如您所见，只能选择星期几。您的代码没有条件，因此整天都为False。您需要确定哪些天应该为真或假。

Answer 3

谢谢大家的帮助。

原来使用的日期选择器是bootstrap-datepicker。我很困惑，因为jquery-ui和bootstrap-datepicker被添加为依赖项，并认为我使用的datepicker来自jquery-ui。

这里是我应该使用的正确参考：https://bootstrap-datepicker.readthedocs.io/en/stable/options.html#beforeshowday

希望这也可以帮助可能遇到相同问题的人。