Jquery DatePicker beforeShowDay по-прежнему кликабельны, даже если все дни уже не могут быть выбраны - PullRequest
Новая
       167

Jquery DatePicker beforeShowDay по-прежнему кликабельны, даже если все дни уже не могут быть выбраны

2 голосов
/ 07 апреля 2020

enter image description here

Я использую jquery пользовательский интерфейс для выбора даты и пытаюсь отключить некоторые даты. Я искал, что мы можем достичь этого с помощью beforeShowDay при инициализации datepicker. Однако я не могу заставить его работать со следующим кодом: 

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

Ответы [ 3 ]

1 голос
/ 07 апреля 2020

Вам нужно какое-то условие, чтобы убедиться, что в вашем массиве есть результат 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">

Как видите, можно выбирать только дни недели. Ваш код не имеет условий, поэтому все дни приводят к ложному. Вам необходимо определить, какие дни должны быть истинными или ложными.

1 голос
/ 07 апреля 2020

Сначала вы должны уничтожить, а затем повторно инициализировать указатель даты. Можете ли вы поставить

$('#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" ];
          }
      });
}());
0 голосов
/ 08 апреля 2020

Спасибо всем за попытку помочь.

Оказывается, что используется средство выбора даты bootstrap -datepicker. Я запутался, поскольку оба jquery -ui и bootstrap -datpicker были добавлены как зависимости, и я подумал, что используемый мной указатель даты из jquery -ui.

Вот правильная ссылка, которую я должен иметь используется: https://bootstrap-datepicker.readthedocs.io/en/stable/options.html#beforeshowday

Надеюсь, это также поможет кому-то, кто может столкнуться с той же проблемой.

...