Include only first and third Wednesday for each month in Bootstrap Datepicker
Using Bootstrap Datepicker I am trying to allow users to select only the first and third Wednesday of each month.
So far, the only thing I have been able to do is enable only environments by passing it in options. Does anyone know if I can pass my "first and third" desired config 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>
source to share
You can use enabledDates
to include single dates instead daysOfWeekDisabled
.
You can create a helper function that returns an array with the first and third Wednesday of a given month using momentjs. An example can be found here .
You can add a listner dp.update
to update your allowed dates (using enabledDates
) when the user changes the month.
Here's 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 options minDate
to prevent the problem when the current date is the first Wednesday of the month and you try to select it.
source to share