Label Customization

Whether you are using the calendar or scroller for range selection, 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.

Download and try example

Demo

Customize
Customize the start & end labels
Show range labels
Override localized labels with custom text
Show for the start label
Show for the end label
Override label helpers with custom text
Show for start helper
Show for end helper
Highlight the selected range or only start/end dates
Highlight selected range
Javascript jQuery Angular React Vue 
mobiscroll.datepicker('#picker', {
    controls: ['calendar'],
    select: 'range',
    rangeHighlight: true,
    showRangeLabels: true,
    rangeStartLabel: 'Outbound',
    rangeEndLabel: 'Return',
    rangeStartHelp: 'Set dates',
    rangeEndHelp: 'Set dates'
});
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.