DatePicker

Introduction

DatePicker is an input field used for selecting single dates or date ranges. It supports date selection, time selection, or a combination of both. In addition, the DatePicker allows users to select months and years. The Date Range option enables selecting a start and end date. The DatePicker shares several properties with the input component, including descriptions, icons, and states. For more details, see the Input documentation.

Variants

• Date (default): Selection of a single date. This is the standard DatePicker configuration and is ideal for most date-only use cases.
• Date range: Selection of a start and end date within the same input field. Suitable for cases that requires a defined time span.
• Date and time: Date and time selection in one input field. Users can choose a specific date along with an exact time value.
• Time only: Time selection without any associated date. Time options are generated in 30-minute intervals (e.g., 09:00, 09:30).
• Month and year: Select a specific month within a given year. One year is displayed at a time, showing all months.
• Year only: Years displayed inline in groups of 12. Users can navigate between sets of years using arrow controls.

Interactive demo

Try the interactive demo below to explore the datepicker component.

Date range

Date range allows users to select a start and end date within a single input field. This variant is ideal for scenarios such as bookings, reservations, reporting periods, or any workflow that requires a defined time span. The selected range is visually highlighted in the calendar, making it easy to understand the duration at a glance. Users can adjust either the start or end date, and the input updates automatically to reflect the selected range.

Date range with presets

DatePicker can be configured with presets to allow quick selection of commonly used date ranges. Presets can be either relative (e.g., Last 7 days) or absolute (e.g., This week) providing users with fast and consistent ways to choose dates without manual input.

• Default: Displays a list of predefined presets alongside an input field and an inline DatePicker. This configuration can be shown directly on the page or embedded within a button that opens the DatePicker in a dropdown, depending on layout needs.
• Include time: When time selection is enabled, the layout adapts to support both date and time input. Two input fields are displayed, allowing users to select a date range with presets while also specifying precise start and end times. This variant is ideal for use cases that require accurate time-based filtering.

For more details about datepicker range with presets:

Disabled vs. Read-only

We have two different states for non-editable input fields:

• Disabled: Can't be focused, edited, or read by screen readers. It does not meet WCAG contrast requirements.
• Read-only: Input is interactive and can be focused, but not edited. Use when you want to display information.

In general, use read-only over disabled for better accessibility.

DatePicker in components

DatePicker can be used within various components. See the links below for more information on how datepicker can be integrated with these components.