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
In progress | Storybook link coming soon 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 or 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, Helper text; field shell matches Input patterns (prefix/suffix/icon) when the implementation provides slots.