Multi-Date Selection
To enable multiple selection set the selectMultiple option to true.
The selectMax option limits how many values can be selected.
To customize the header you can pass a headerText or turn selectCounter on to display a localized text with the number of dates selected.
Dynamically switching between single, multiple or range select can be done with option changes.
Demo
$('#date-picker').mobiscroll().datepicker({
controls: ['calendar'],
selectMultiple: true,
selectMax: 1 ,
selectCounter: true ,
headerText: ' '
});
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
$(function () {
$('#demo-multi-day')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
selectMultiple: true,
});
$('#demo-max-days')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
selectMultiple: true,
selectMax: 5,
headerText: 'Pick up to 5 days',
});
$('#demo-counter')
.mobiscroll()
.datepicker({
controls: ['calendar'],
display: 'inline',
selectMultiple: true,
selectCounter: true,
});
});
<div class="mbsc-grid">
<div class="mbsc-row">
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Multi-day</div>
<div id="demo-multi-day"></div>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Max days</div>
<div id="demo-max-days"></div>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Counter</div>
<div id="demo-counter"></div>
</div>
</div>
</div>
</div>