> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Date and time picker

> Date and time primitives follow the dateTime config provider. Display and parsing respect the user’s locale; users may override format in profile settings where the product allows.

## Date and time picker

<Badge color="blue">v1.0.0</Badge> | [View Date picker in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-datepicker--docs) · [View Time picker in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-timepicker--docs) · [View Date range picker in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-daterangepicker--docs) · [View Date time range picker in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-datetimerangepicker--docs)

Date time picker primitive group consists of 6 unique primitives with different functionalities that allow users to select a single date and/or time or a range of dates and/or times from a calendar or clock interface via an input field:

* Date picker: for selecting a single date; 10/06/2025.
* Time picker: for selecting a single time; 14:00.
* Date time picker: for selecting a single date and time; 10/06/2025 14:00.
* Date range picker: for selecting date range; 10/06/2025 - 12/06/2025.
* Time range picker: for selecting time range; 14:00 - 16:00.
* Date time range picker: for selecting date and time range; 10/06/2025 14:00 - 12/06/2025 16:00.

### When to use

* When users need precision: If the user needs to select an exact date or time.
* To ensure proper formatting: Avoids input errors by enforcing a standard format.
* When date/time is the primary input: If date/time is the core action.
* When users need to compare dates or view ranges: Helps users filter by date ranges or compare multiple data points across dates.

### When to use something else

* When looking for recent or real time data: Consider allowing the user to sort by recent activity or toggle on ‘live data’.
* For relative date queries: While a date picker may be helpful, consider adding shortcuts to the picker for a quicker selection, such as “Last week”, “Last month” and “Last year”.
* When entering fixed or recurring time values: Consider allowing for cron expressions or pre-set date and time stamps users can choose from.
* When exact timing and format is not important: When users leave comments or descriptions where they reference a date or time but the formatting does not matter, provide a simple [Input](/aura-design-system/primitives/input) or [Textarea](/aura-design-system/primitives/textarea).

### Behavior

* Opening the control reveals a calendar and/or time UI anchored to the field; choosing a value commits it in the configured locale format.
* Keyboard users must be able to type valid values and open the picker without relying on the mouse alone (implementation-specific shortcuts allowed).
* Range pickers enforce start/end ordering or validation messages when the range is invalid.

### Often used with

* [Label](/aura-design-system/primitives/label), [Helper text](/aura-design-system/primitives/helper-text); field shell matches [Input](/aura-design-system/primitives/input) patterns (prefix/suffix/icon) when the implementation provides slots.