Understanding Controls
The picker supports multiple controls:
- Calendar view - can be used on its own or combined with a time scroller
- Date picker - can be used separately or together with a time picker as a scroller on mobile and as a dropdown on desktop
- Time picker - can be used separately or together with a date picker or calendar
- Datetime picker - can be used as a scroller on mobile and as a dropdown on desktop
Use the controls option (expecting an array) to configure the picker.
Demo
Renders a calendar view for range selection.
{
controls: ['calendar'],
select: 'range',
touchUi: Renders a date scroller for touch and a dropdown for pointer interaction.
{
controls: ['date'],
select: 'range',
touchUi: Renders a compact (one wheel) date picker with time. The scroller can be used with touch interaction on mobile and the dropdown for pointer interaction on desktop.
{
controls: ['datetime'],
select: 'range',
touchUi: Renders a combined view of a calendar and time scroller/dropdown for date and time range selection.
{
controls: ['calendar', 'time'],
select: 'range',
touchUi:
Renders a time scroller for touch and a dropdown for pointer interaction. The time format comes from the locale option that can be overridden.
{
controls: ['time'],
select: 'range',
touchUi: mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.datepicker('#demo-calendar', {
controls: ['calendar'],
select: 'range',
});
mobiscroll.datepicker('#demo-date', {
controls: ['date'],
select: 'range',
});
mobiscroll.datepicker('#demo-datetime', {
controls: ['datetime'],
select: 'range',
});
mobiscroll.datepicker('#demo-calendar-time', {
controls: ['calendar', 'time'],
select: 'range',
});
mobiscroll.datepicker('#demo-time', {
controls: ['time'],
select: 'range',
});
<label>
Calendar
<input id="demo-calendar" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>
<label>
Date
<input id="demo-date" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>
<label>
Date & Time
<input id="demo-datetime" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>
<label>
Calendar & Time
<input id="demo-calendar-time" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>
<label>
Time
<input id="demo-time" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>