在 Bootstrap Datepicker 中仅启用每个月的第一个和第三个星期三

Question

使用Bootstrap Datepicker，我试图让用户只选择每个月的第一个和第三个星期三。

目前，我唯一能做的就是只启用星期三，方法是在选项中传递它。 有谁知道我是否可以通过我的“第一和第三”想要的配置作为选项，以及如何？

<script type="text/javascript">
    $(function () {
        $('.bootstrap-date-picker').datetimepicker({
            locale: 'fr',
            daysOfWeekDisabled: [0,1,2,4,5,6],
            format: "ll",
            minDate: moment(),
            icons:
        });
    });
</script>

Answer 1

您可以使用enabledDates 选项来启用单个日期而不是daysOfWeekDisabled。

您可以使用 momentjs 创建一个帮助函数，该函数返回一个包含给定月份的第一个和第三个星期三的数组。一个例子可以在here找到。

您可以为dp.update 添加一个监听器，以便在用户更改月份时更新您启用的日期（使用enabledDates 函数）。

这是一个完整的工作示例：

function getFirstAndThirdWed(year, month){
    // Convert date to moment (month 0-11)
    var myMonth = moment({year: year, month: month});
    // Get first Wednesday of the first week of the month
    var firstWednesday = myMonth.weekday(2);
    // Check if first Wednesday is in the given month
    if( firstWednesday.month() != month ){
        firstWednesday.add(1, 'weeks');
    }
    // Get 3rd Wednesday of the month
    var third = firstWednesday.clone().add(2, 'weeks');
    return [firstWednesday, third];
}

$('.bootstrap-date-picker').datetimepicker({
  locale: 'fr',
  useCurrent: false,
  enabledDates: getFirstAndThirdWed(moment().year(), moment().month()),
  format: "ll",
  minDate: moment().startOf('day'),
}).on("dp.update", function (e) {
  if( e.viewDate ){
    var enabledDates = getFirstAndThirdWed(e.viewDate.year(), e.viewDate.month());
    $('.bootstrap-date-picker').data("DateTimePicker").enabledDates(enabledDates);
  }
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group">
    <div class='input-group date bootstrap-date-picker'>
        <input type='text' class="form-control"/>
        <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

---

在minDate 选项中添加了startOf('day') 以防止当当前日期是当月的第一个星期三并且您尝试选择它时出现问题。