更新星期几在选择下拉列表中更改值时禁用引导日期选取器

Question

我正在尝试根据下拉列表的输入更改日期选择器选项。 有三种情况。对于案例 1 和案例 2，我只希望周一、周三和周四可供选择，所有其他日期将被模糊/禁用。

对于案例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小提琴。

请让我知道我如何解决这个问题。我已经尝试使用日期选择器销毁并再次在我的代码中重新启动日历，在这种情况下它也不起作用。

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

jquery 中的日期选取器第二次未加载

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>