The range picker supports start & end selection for date, time and combined date & time. Choose between a calendar view with one or more months, week view with single or multiple weeks or date and time scrollers and dropdowns.
Easily switch between single and range select for use-cases like one-way flights.
The capabilities like built-in validation, minimum, maximum values, disabled dates, range length are supported by both the scroller and calendar.
Change the theme setting here
Switch the layout between mobile & desktop
and see how it looks.
Change the language and localization settings here
Range - Flight booking
For a great booking experience a good date picker is essential. The best implementations are contextual and take the intent (what people want to do) and context (where and how are they doing it) into account. Learn how to use and customize the range picker and see how you can add your flavor that matches with the overall experience of your application.
Range - Marked, colored & labels
You can highlight days, mark them with colored dots, add labels or completely color the background of the days using the
This offers means to add more information to the calendar that could be valuable to users. While you can use the
colors along with
labels, the latter two are mutually exclusive because they get rendered in the same place on the UI.
You can add them as
ranges or specify
recurring rules. The
recurring object supports different ways to describe the rules.
Range - Presets
The selected range can be adjusted by the user or you can programmatically set the
This is especially useful and effective when using the range for filtering and you'd like to offer predefined ranges like Yesterday, Today, Last week and so on. Setting the values can be done from something as simple as a button click.
Range - Date types
The range works with different date types:
- JS date object - a common way of passing a date is through a Date object:
new Date(1995, 11, 17, 15, 24)(make sure to not simply pass a date string to
- ISO date string - standardized way of passing dates:
'2008-09-15T15:53:00'(make sure to pass it as a string)
- Moment.js object - a great solution that solves common date management difficulties:
moment([2018, 3, 27, 12, 15])(make sure to have moment.js loaded)
When passing dates to the component - eg. invalids, min/max - you can do it in either format and the picker will automatically know what to do with it. If you want to specify how the picker should return values, you can do it in the
Range - Formatting values
Besides customizing the date and time formats you can reorder the time picker wheels and change its formats with the
Range - Timezones
The range works with local times by default, but ships with support for changing the timezone. The conversions and correct output relies on either of the two external libraries: luxon or moment-timezone. For installing and using these libraries check out this guide.
There are two angles regarding timezones:
dataTimezone- the range expects this format and returns this format. It is
'local'by default if the date-times don't contain any timezone information
displayTimezone- the calendar displays everything in this timezone. The date-times will be converted from the
dataTimezoneand displayed accordingly. It is
Range - Lifecycle events
The date picker ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
While users interact with the UI events like
... will be triggered.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.