Single Date Selection
Single value selection is the default behavior of the date picker. You can explicitly enable it by setting the selectMultiple to false.
You can dynamically switch between single and multiple select or range select which helps with building a system for one-way and two-way bookings.
Looking for multiple select? See how to enable multi-select →
Demo
mobiscroll.datepicker('#date-picker', {
controls: ['calendar'],
selectMultiple: false
});
mobiscroll.datepicker('#datetime-picker', {
controls: ['calendar', 'time'],
selectMultiple: false
});
mobiscroll.datepicker('#date-time-grid', {
controls: ['calendar', 'timegrid'],
selectMultiple: false
}); JSHTML
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.datepicker('#demo-single-select-date', {
controls: ['calendar'],
selectMultiple: false,
});
mobiscroll.datepicker('#demo-single-select-datetime', {
controls: ['calendar', 'time'],
selectMultiple: false,
});
mobiscroll.datepicker('#demo-single-select-timegrid', {
controls: ['calendar', 'timegrid'],
selectMultiple: false,
});
<label>
Date
<input id="demo-single-select-date" mbsc-input data-input-style="box" data-label-style="stacked" placeholder="Please Select..." />
</label>
<label>
Date & time
<input id="demo-single-select-datetime" mbsc-input data-input-style="box" data-label-style="stacked" placeholder="Please Select..." />
</label>
<label>
Date & timegrid
<input id="demo-single-select-timegrid" mbsc-input data-input-style="box" data-label-style="stacked" placeholder="Please Select..." />
</label>