在选择下拉列表中更改值时更新引导日期选择器的 DaysOfWeekDisabled

Question

我正在尝试根据下拉菜单的输入更改日期选择器选项。 有三种情况。对于 case1 和 case2，我希望只有星期一、星期三和星期四可供选择，而所有其他日子都将被模糊/禁用。

对于案例 3，周一、周二、周三和周四将启用，所有其他日子将被模糊或禁用。

问题是日期选择器根据第一次选择工作。例如，如果我先选择 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 Fiddle。

请告诉我如何解决这个问题。我已经尝试使用 datepicker destroy 并再次在我的代码中重新启动日历，在这种情况下它也不起作用。

我已经搜索过类似的问题并回答如下。

DatePicker in jquery is not loaded for the second time

Answer 1

您只需在初始化 On Change 事件函数时添加：$('#iEventDays').datepicker('remove');。

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