Обновите DaysOfWeekDisabled bootstrap указатель даты при изменении значения в раскрывающемся списке - PullRequest
0 голосов
/ 09 февраля 2020

Я пытаюсь изменить параметр выбора даты в зависимости от ввода раскрывающегося списка. Есть три случая. Для case1 и case2 я хочу, чтобы только понедельник, среда и четверг были доступны для выбора, а все остальные дни будут размыты / отключены.

Для case3 Понедельник, вторник, среда и четверг будут включены, а все остальные дни будут размыты или отключены.

Проблема в том, что средство выбора даты работает в соответствии с первым выбором. Например, если я сначала выберу case1, опция календаря будет работать нормально. После этого, если я выберу вариант 3, это не изменит параметры календаря. Это означает, что он показывает только отключенную дату, которая была для случая 1. Он должен был включить вторник в календаре, но это не так.

    <select name="iEventType" id="iEventType" class="form-control select2">
     <option value="">Select Event Type</option>
      <option value="case1">case1</option>
      <option value="case2">case2</option>
      <option value="case3">case3</option>

  </select>

    <div class="input-field" id="event_type">                          
      <input type="text" class="form-control"  placeholder="Select Day (Please Select Event Type First)"  name="event_days" id="iEventDays" value="">
    </div>



<script>
     $("#iEventType").change(function() {
       var val = $(this).val();
       if (val == "case1" || val == "case2") {
         var disabled_day = [0, 2, 5, 6];

         $('#iEventDays').datepicker({
           startDate: new Date(),
           autoclose: true,
           format: 'mm/dd/yyyy',
           daysOfWeekDisabled: disabled_day
         });

       } else if (val == "case3") {


         var disabled_day = [0, 5, 6]
         $('#iEventDays').datepicker({
           startDate: new Date(),
           autoclose: true,
           format: 'mm/dd/yyyy',
           daysOfWeekDisabled: disabled_day
         });

       } else {
         $("#iEventDays").val("");
       }
     });
</script>

Здесь вы можете увидеть JS Скрипт .

Пожалуйста, дайте мне знать, как я могу решить эту проблему. Я попытался с помощью datepicker уничтожить и снова перезапустить календарь в моем коде, для этого случая он также не работал.

Я уже искал похожие вопросы и отвечаю следующим образом.

DatePicker в jquery не загружается во второй раз

1 Ответ

1 голос
/ 09 февраля 2020

Вам просто нужно добавить: $('#iEventDays').datepicker('remove'); при инициализации функции события On Change.

 $("#iEventType").change(function() {
   var val = $(this).val();
   $('#iEventDays').datepicker('remove');
   if (val == "case1" || val == "case2") {

     var disabled_day = [0, 2, 5, 6];
    
     // $("#iEventDays").datepicker('option','daysOfWeekDisabled',disabled_day);
     $('#iEventDays').datepicker({
       startDate: new Date(),
       autoclose: true,
       format: 'mm/dd/yyyy',
       daysOfWeekDisabled: disabled_day
     });

   } else if (val == "case3") {

   
     var disabled_day = [0, 5, 6]
     $('#iEventDays').datepicker({
       startDate: new Date(),
       autoclose: true,
       format: 'mm/dd/yyyy',
       daysOfWeekDisabled: disabled_day
     });

   } else {
     $("#iEventDays").val("");
     //$( "#iEventDays").datepicker('disable');
   }
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
</script>
<select name="iEventType" id="iEventType" class="form-control select2">
         <option value="">Select Event Type</option>
         <option value="case1">case1</option>
         <option value="case2">case2</option>
         <option value="case3">case3</option>
                            
  </select>
                            
<div class="input-field" id="event_type">
                           
<input type="text" class="form-control"  placeholder="Select Day (Please Select Event Type First)"  name="event_days" id="iEventDays" value="">

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...