Enable only first and third wednesday for each mon

Question

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>

Answer 1

You can use enabledDates option to enable single dates instead of daysOfWeekDisabled.

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.

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>

---

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.