Javascript Date & Time Start-end selection Example

To enable range selection set the select option to range.

The microcopy for rangeStartLabel and rangeEndLabel can be easily overridden. For flight booking "Outbound" and "Return" makes sense while for accommodation booking "Check in" and "Check out" might be more appropriate.

Besides invalidating selection that is before and after a specific date, the minimum and maximum allowed length of a range selection can be enforced through the minRange and maxRange options.

Dynamically switching between single, multiple or range select can be done with option changes.

Looking for more range picker? Learn how to customize range selection →

Download and try example

Date Time list Time grid Date & time

Customize the start & end labels

Override localized labels with custom text

Show for the start label

Show for the end label

Control the minimum and maximum length of the selection

Minimum length of

days

Maximum length of

days

Minimum length of milliseconds

(which is 0 day(s) 2 hour(s) and 30 minute(s))

Maximum length of milliseconds

(which is 0 day(s) 2 hour(s) and 30 minute(s))

Javascript jQuery Angular React Vue

mobiscroll.datepicker('#picker', {
    controls: ['date'],
    select: 'range',
    showRangeLabels: true,
    rangeStartLabel: 'Outbound',
    rangeEndLabel: 'Return',
    minRange: 3,
    maxRange: 10
});