在Bootstrap Datepicker中仅启用每个月的第一个和第三个星期三 [英] Enable only first and third wednesday for each month in Bootstrap Datepicker

问题描述

使用 Bootstrap Datepicker ，我试图使用户只能选择<每个月的strong>第一和第三星期三.

Using the Bootstrap Datepicker, I'm trying to enable users to choose only first and third Wednesdays of each month.

就目前而言，我唯一要做的就是通过在选项中传递仅启用星期三. 有人知道我是否可以通过我的第一和第三"通缉配置作为选项，以及如何?

For now, the only thing I've managed to do is to enable only Wednesdays, by passing it in the options. Does anyone know if I can pass my "first and third" wanted configuration as an option, and how?

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

推荐答案

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

您可以创建一个辅助函数，该函数使用momentjs返回具有给定月份的第一个和第三个星期三的数组.可以在此处找到一个示例.

You can create an helper function that returns an array with the first and the third Wednesday of a given month using momentjs. An example can be found here.

您可以为 dp.update 添加一个列表器来更新您的列表用户更改月份时的启用日期(使用 enabledDates 函数).

You can add a listner for dp.update to update your enabled dates (using enabledDates function) when the user changes month.

这里有一个完整的工作示例:

Here a complete working example:

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') 以防止出现问题当前日期是每月的第一个星期三，而您尝试选择它.

Added startOf('day') in minDate option to prevent problem when the current date is the first Wednesday of the month and you try to select it.

这篇关于在Bootstrap Datepicker中仅启用每个月的第一个和第三个星期三的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！