时间戳

首页 > 解决方案 > 实时更新引导日期选择器的 DaysOfWeekDisabled

jquery - 实时更新引导日期选择器的 DaysOfWeekDisabled

问题描述

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

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

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

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

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

标签： jquerybootstrap-datepicker

解决方案

是的，您可以使用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>

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

推荐阅读