实时更新引导程序日期选择器的DaysOfWeekDisabled

Question

我创建了一个日期选择器，如下所示。

$(".datepicker-class").datepicker({
format: 'yyyy-mm-dd',
startDate: date,
autoclose: true,
todayHighlight: true,
datesDisabled: exclude_dates,
daysOfWeekDisabled: disabledWeekDays
})

但我想使用函数setDaysOfWeekDisabled来实时更新禁用的星期几。

这意味着最初如果disabledWeekDays = [0]，所有周日都将被禁用。

但在那之后，点击一些按钮，我想禁用星期一，我该怎么做？

Answer 1

是的，您可以使用setDaysOfWeekDisabled，即：

设置应禁用的星期几。有关有效值，请参阅禁用周的天数。

省略daysOfWeekDisabled(或提供一个虚假值(以取消设置一周中禁用的天数。

这里是一个实时示例：

var date = new Date();
var exclude_dates = ['2018-12-01', '2018-12-07'];
var disabledWeekDays = [0];
$(".datepicker-class").datepicker({
format: 'yyyy-mm-dd',
startDate: date,
autoclose: true,
todayHighlight: true,
datesDisabled: exclude_dates,
daysOfWeekDisabled: disabledWeekDays
});
$('#btnDisableMon').click(function(){
$('.datepicker-class').datepicker('setDaysOfWeekDisabled', [1]);
});
$('#btnDisableSun').click(function(){
$('.datepicker-class').datepicker('setDaysOfWeekDisabled', [0]);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<input type="text" class="form-control datepicker-class">
<button id="btnDisableMon" class="btn btn-primary">Disable Mondays</button>
<button id="btnDisableSun" class="btn btn-primary">Disable Sundays</button>

以前也有人问过类似的问题。请注意，如果您想检查是否已经选择的日期必须无效/空白，则必须添加您的逻辑。

Answer 2

我认为没有任何内置的方法来更新日期选择器选项。您必须销毁以前的日期选择器，并使用更新的选项进行初始化。

下面的代码将为您工作

var newOptions = {
format: 'yyyy-mm-dd',
startDate: date,
autoclose: true,
todayHighlight: true,
datesDisabled: exclude_dates,
daysOfWeekDisabled: disabledWeekDays // Update this option value like [0] or [1]
}
//Destroy datepicker
$('datepicker-class').datepicker('destroy');
// Re-initialize with new options
$('datepicker-class').datepicker(newOptions);

Answer 3

daysOfWeekDisabled: [0, 6]-用于禁用的周末