Question

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

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

但是我想使用功能setDaysOfWeekDisabled实时更新禁用的星期几。

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

但是在单击某些按钮之后，我想在星期一禁用，该怎么办？

Answer 1

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

下面的代码将为您服务

     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 2

是的，您可以使用setDaysOfWeekDisabled：

设置应该禁用的星期几。有效值请参见daysOfWeekDisabled。

省略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>

asked before类似。请注意，如果要检查是否必须取消已选择的日期/取消选择日期，则必须添加逻辑。

Answer 3

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

实时更新Bootstrap日期选择器的DaysOfWeekDisabled

3 个答案: