Jquery datepicker beforeShowDay 仍然可以点击，即使所有天都应该已经不可选择

Posted 2023-05-08

【中文标题】Jquery datepicker beforeShowDay 仍然可以点击，即使所有天都应该已经不可选择

【英文标题】：Jquery datepicker beforeShowDay still clickable even all days should already be not selectable

【发布时间】：2020-07-19 09:29:22

【问题描述】：

我正在将 jquery ui 用于 datepicker，并且我正在尝试禁用某些日期。我已经搜索过我们可以在 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">

我能够让它在上面的 sn-p 中工作，但我真的不明白为什么在我的实际应用中日期选择器显示但所有日期仍然是可选的。

当我在 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"];
                        
                    );
                );
            )

【问题讨论】：

原因可能是 css overwitten 。你能在这里分享你所有的html吗？我们无法从您输入的代码中理解。

嗨@Çağrı 日期选择器的输入元素与上面的完全一样。我通过 ajax 加载元素，然后当我将其附加到正文时，我在模式中打开内容，并像上面一样运行 datepicker 的初始化。

你能在这里分享你的ajax代码吗？问题应该是关于重新初始化。

@Çağrı 我更新了帖子并添加了代码

我更新了代码。请再次检查答案。

【参考方案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" ];
          
      );
());

【讨论】：

感谢您的帮助。我试过了，结果还是一样，天数还是可以点击的。

我又编辑了一个东西，你应该改变你的第一个方法，你应该首先在文档准备好而不是函数中调用。因为该函数总是在 open 之前调用。所以你以后改变什么并不重要

【参考方案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。您需要确定哪些日子应该是 True 或 False。

【讨论】：

感谢您的回答@Twisty。我禁用了所有天以使其无法选择，只是为了测试禁用天数确实反映在日历中。我尝试添加您的脚本，但所有日子仍然可以选择。可能有一些东西会覆盖 beforeShowDay 函数的结果，但我不确定它在哪里。

@bananaCute 会检查控制台是否有任何错误。还要检查以确保您的所有库都正确加载。你们有什么冲突吗？

【参考方案3】：

感谢大家的帮助。

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

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

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