Date & Time Range Picker
Set up the range picker for date & time pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date and time range picker. The controls option supports different values:
datetime- will render a compact date scroller or dropdown with time picker for date & time range selectioncalendar- will render a calendar view for date range selection (explore date ranges)date- will render a date scroller or dropdown for date range selection (explore date ranges)time- will render a time picker for range selection (explore time ranges)timegrid- will render a time grid for range selection (explore time range selection)
Demo
One of the most common ways to represent date range selection is through a calendar with or without a time picker. Learn how to build a date-only picker.
mobiscroll.datepicker('#picker', {
controls: ['calendar', 'time'],
select: 'range',
display: 'inline',
touchUi:
Instead of selecting time from a list of values you can show a grid by passing 'timegrid' to the controls option.
mobiscroll.datepicker('#picker', {
controls: ['calendar', 'timegrid'],
select: 'range',
display: 'inline',
touchUi:
Passing datetime to the controls option renders a compact date scroller and a time scroller or dropdown with customizable start and end labels.
{
controls: ['datetime'],
select: 'range',
display: 'inline',
touchUi: Besides rendering it inline, you can link the range to an input that can be a Mobiscroll input or an existing field. Explore more ways to use the picker.
mobiscroll.datepicker('#picker', {
controls: ['datetime'],
select: 'range',
touchUi:
When using two separate inputs for start and end, you will want to initialize the component on the first input and make sure to pass the references of the two inputs through the startInput and endInput options.
html<div id="range"></div>
<label>
Start
<input id="start" mbsc-input placeholder="Please select..." />
</label>
<label>
End
<input id="end" mbsc-input placeholder="Please select..." />
</label>
jsmobiscroll.datepicker('#range', {
controls: ['datetime'],
select: 'range',
startInput: '#start',
endInput: '#end',
touchUi:
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.datepicker('#demo-calendar', {
controls: ['calendar', 'time'],
select: 'range',
display: 'inline',
});
mobiscroll.datepicker('#demo-calendar-timegrid', {
controls: ['calendar', 'timegrid'],
select: 'range',
display: 'inline',
});
mobiscroll.datepicker('#demo-date', {
controls: ['datetime'],
select: 'range',
display: 'inline',
});
mobiscroll.datepicker('#demo-one-input', {
controls: ['datetime'],
select: 'range',
});
mobiscroll.datepicker('#demo-start-end', {
controls: ['datetime'],
select: 'range',
startInput: '#demo-start',
endInput: '#demo-end',
});
<div id="demo-calendar"></div>
<div id="demo-calendar-timegrid"></div>
<div id="demo-date"></div>
<label>
Range
<input id="demo-one-input" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>
<div id="demo-start-end"></div>
<div class="mbsc-grid mbsc-no-padding">
<div class="mbsc-row">
<div class="mbsc-col-6">
<label>
Start
<input id="demo-start" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>
</div>
<div class="mbsc-col-6">
<label>
End
<input id="demo-end" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>
</div>
</div>
</div>