Date Range Picker
Set up the range picker for date pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date range picker. The controls option supports different values:
calendar- will render a calendar view for date range selectiondate- will render a date scroller or dropdown for date range selectiondatetime- will render a compact date scroller or dropdown with time picker for date & time range selection (explore date & time ranges)time- will render a time picker for range selection (explore time ranges)timegrid- will render a time grid for range selection (explore time ranges)
Demo
One of the most common ways to represent date range selection is through a calendar view with one or more months. Learn about how to configure and customize the calendar.
{
controls: ['calendar'],
select: 'range',
calendarType: 'month',
pages: 2,
display: 'inline',
touchUi:
Passing date to the controls option renders a date scroller or dropdown with customizable start and end labels.
{
controls: ['date'],
select: 'range',
display: 'inline',
touchUi:
By setting the select: 'preset-range' you can pre-set the parameters of the selection rather than let people freely pick start/end dates. The first day and length can be set through the firstSelectDay and selectSize options.
{
controls: ['calendar'],
select: 'preset-range',
firstSelectDay: 2,
selectSize: 10,
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.
html<label>
Range
<input id="range" mbsc-input placeholder="Please select..." />
</label>
jsmobiscroll.datepicker('#range', {
controls: ['calendar'],
select: 'range',
calendarType: 'month',
pages: 2,
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: ['calendar'],
select: 'range',
startInput: '#start',
endInput: '#end',
calendarType: 'month',
pages: 2,
touchUi:
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.datepicker('#demo-calendar', {
controls: ['calendar'],
select: 'range',
calendarType: 'month',
pages: 2,
display: 'inline',
});
mobiscroll.datepicker('#demo-date', {
controls: ['date'],
select: 'range',
display: 'inline',
});
mobiscroll.datepicker('#demo-range-presets', {
controls: ['calendar'],
select: 'preset-range',
display: 'inline',
pages: 2,
firstSelectDay: 2,
selectSize: 10,
});
mobiscroll.datepicker('#demo-one-input', {
controls: ['calendar'],
select: 'range',
});
mobiscroll.datepicker('#demo-start-end', {
controls: ['calendar'],
select: 'range',
startInput: '#demo-start',
endInput: '#demo-end',
});
<div id="demo-calendar"></div>
<div id="demo-date"></div>
<div id="demo-range-presets"></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>