The date range picker allows users to enter a date range by either typing two dates in the input field or selecting a date range in the calendar.

The date range picker can also be used to enter a single date.

Basic date range picker – live example

When to Use

Use the date range picker if:

• Users need to enter a date range and you know that the keyboard is not the primary device used for navigating the app.

Don’t use the date range picker if:

• Users need to enter a date and a time. In this case, use the date picker or time picker instead.
• Selecting ranges is not the user’s primary goal. In this case, use the simple date picker.
• If the keyboard is the primary device used for navigating the app, use two input fields. This allows the user to jump quickly from field to field.

Anatomy

1. Date input field: Field for typing in dates directly. It contains a mask.
2. Text: A placeholder or the selected/typed text.
3. Date range picker button: Button that opens the calendar.
4. Calendar: See the calendar guideline for more details.
5. Current date
6. Selected date range

Variants

Restricted Date Range

You can set minimum and maximum dates. In this case, the user can only select dates within the approved range.

Predefined Date Range

You can set a predefined date range that is selected by default when the user opens the calendar. The user can still change the dates.

Date Display in the Input Field

You can specify the format of the dates in the input field. Supported formats are based on the Unicode Locale Data Markup Language (LDML) date format notation.

You can also specify the symbol that separates the start and end dates.

Minimum/maximum dates, specific date format – live example

Predefined date range, custom delimiter – live example

Behavior and Interaction

Selection

Date range: After selecting a start date, hovering over another date turns the dates in between to light blue, indicating that they are in the selected range. When the user selects an end date, the calendar closes and the range appears in the date input field.

Single date: To enter a single date, the user can type one date into the input field, or select the same day as the start and end date in the calendar.

Shortcuts

The following shortcuts are available for entering specific dates:

• “today”
• “yesterday”
• “in x days”
• “x days ago”
• “yesterday – today”
• “x days ago – in x days”

Restricted Date Range

Formatting

Related Links