Guidelines
When to use
- Booking Stays: When guests need to select their check in and check out dates for a hotel stay.
- Promotional offers: When offering special promotions or discounts that apply for specific date ranges, allowing users to choose their desired travel dates.
- Event planning: When organizing events, such as conferences or weddings, that span multiple days, enabling users to select the start and end dates of the event.
When not to use
- Single day appointments: When scheduling appointments or services that only require selecting one specific day; instead, use the Date Picker
- Entering birthdates: When users need to input a single date value, such as a birthdate, where a numeric keyboard input is more appropriate. Instead, use the Date Picker
- Quick date selections: Where only one date is needed, such as booking a spa session or a dining reservation for a specific day. Instead, use the Date Picker
Best Practices
- Disable invalid dates: Disable future or past dates according to the use case. For example, if the user needs to book a stay, disable past dates that are not valid for selection.
- Offer pre-selected date ranges: When possible, provide a list of applicable date ranges, such as "Last 7 days" or "Next 30 days," to make it easier for users to select their desired range.
- Provide clear options: Ensure that date ranges are displayed with concise and logical labels, such as "Next weekend" or "Holiday season," to facilitate easy and quick selection.
Good to know
The Range Date Picker is an advanced version of the Date Picker, allowing users to select a range of dates instead of just one. Alongside these, we also offer a Time Picker for selecting specific times.
- Date Picker: For scheduling a single spa appointment.
- Range Date Picker: For booking a stay with check-in and check-out dates.
- Time Picker: For setting a wake-up call time.
Behavior
|
Action |
Options |
|---|---|
|
Opening the Calendar
|
The calendar can be opened in two ways: 1. Click the calendar icon on the far right of the field to open the calendar menu. 2. When the text field is focused, the calendar menu appears and stays open until a date is selected or focus is removed. |
|
Selecting a Date
|
A date can be selected by: 1. Manually entering a date in the text input field. 2. Clicking on a date in the calendar menu. |
|
Navigating Between Months |
A user can move between months by, clicking the chevron icons at the top left and right of the calendar.
|
|
Selecting a Year |
The current date and year are shown by default. To change the year, users can: 1. Manually type the year in the date text field. 2. Click the up and down arrows that appear when focusing or hovering over the year input in the calendar. 3. Select the year input and type a new year. |
|
Closing the Calendar |
The calendar can be closed by: 1. Selecting a single date or the end date in a range, which will automatically close it. 2. Clicking anywhere outside the calendar menu. Removing focus from the picker.
|
Keyboard interactions
|
Key |
Interaction |
|---|---|
|
Arrow keys |
Using the Arrow keys to navigate and pressing Enter to select a date. |
|
Arrow keys |
Using the Arrow keys to navigate to the next or previous month. |
|
ESC keys |
Closing the Calendar |
Content
While a user is interacting with the Range Date Picker, they may come across unavailability, blocked off dates, or other situations when a date cannot be selected. In those cases, use error messages to guide users to solve the issue.
Tone
Keep an informative tone when writing hints and error messages while users interact with the Range Date Picker.
Do
- Guide users to solve the issue.
- Use various instructions/hints to cover for different situations.
Do not
- Write simple or generic messages that are unhelpful to the user.