Date Range Picker

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.

The range start/end labels can also be hidden in some cases if needed. Use the showRangeLabels option for that.

Furthermore, you have the option to toggle the range highlight with the rangeHighlight option, if needed.

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

Demo

Highlight the selected range or only start/end dates
Highlight selected range
Customize the start & end labels
Show range 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
days
days
Javascript jQuery Angular React Vue 
$('#picker').mobiscroll().datepicker({
    select: 'range',
    rangeHighlight: true
    showRangeLabels: true,
    rangeStartLabel: 'Outbound',
    rangeEndLabel: 'Return',
    minRange: 3,
    maxRange: 10
});
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.