Range with a calendar and time picker

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.

Javascript jQuery Angular React 
mobiscroll.datepicker('#picker', {
    controls: ['calendar', 'time'],
    select: 'range',
    display: 'inline',
    touchUi: 
});
Range with a calendar and time grid

Instead of selecting time from a list of values you can show a grid by passing 'timegrid' to the controls option.

Javascript jQuery Angular React 
mobiscroll.datepicker('#picker', {
    controls: ['calendar', 'timegrid'],
    select: 'range',
    display: 'inline',
    touchUi: 
});
Range with a scroller/dropdown

Passing datetime to the controls option renders a compact date scroller and a time scroller or dropdown with customizable start and end labels.

Javascript jQuery Angular React 
{
    controls: ['datetime'],
    select: 'range',
    display: 'inline',
    touchUi: 
}
Using the range with one input

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.

Javascript jQuery Angular React 
mobiscroll.datepicker('#picker', {
    controls: ['datetime'],
    select: 'range',
    touchUi: 
});
Using the range with two inputs

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.

Javascript jQuery Angular React 
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>
js$('#range').mobiscroll().datepicker({
    controls: ['datetime'],
    select: 'range',
    startInput: '#start',
    endInput: '#end',
    touchUi: 
});
Preview in fullscreen