> ## 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.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Date time range picker

> Lets users select a start and end date and time in a single control, with locale-aware formatting and validation.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-datetimerangepicker--docs)

Select a date and time range such as 10/06/2025 14:00 – 12/06/2025 16:00. Part of the [Date picker](/cdf/aura/primitives/date-picker) family; display and parsing respect the user's locale.

## When to use

* **Time boundaries:** Event windows, shift schedules, or log queries where both date and time boundaries matter or when users need to compare intervals that span less than a full day.

## 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 DateTime range 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](/cdf/aura/primitives/input) or [Textarea](/cdf/aura/primitives/textarea).

## Dos and don'ts

* Do allow for shortcuts when it would help speed up date selection.
* Do include AM/PM selection clearly when using 12-hour format; ambiguity here causes real errors.
* Don't change the predefined date format.
* Don't truncate dates inside the Input.
* Don't include seconds unless the context requires it (log timestamps, precise scheduling) — it adds complexity most users don't need.

## Behavior

* Enforce valid start/end ordering; show validation when the range is incomplete or inverted.
* Opening the control reveals a date and time picker calendar UI anchored to the field.
* Validate that the end is after the start when both date and time are set.
* The picker should remain open until the user has clicked `Apply` or selected both a start and end date and time value.
* Keyboard users must be able to type valid values and open the picker without relying on the mouse alone (implementation-specific shortcuts allowed).

## Often used with

* [Label](/cdf/aura/primitives/label), [Helper text](/cdf/aura/primitives/helper-text), [Chart](/cdf/aura/primitives/chart) time-range filters.

## Accessibility

* Structure trigger button text to explicitly announce both full start and end timestamps (e.g., "Selected range: August 1, 2026, 08:00 to August 5, 2026, 17:00").
* Associate the single trigger button or input element with an explicit [Label](/cdf/aura/primitives/label) component using matching `id` and `htmlFor` attributes.
* Format the single trigger text to explicitly announce full start and end boundaries (e.g., "Jan 12, 2026, 08:00 to Jan 19, 2026, 17:00") so screen readers convey the complete selection.
* Pass clear interaction or format instructions to the single field via `aria-describedby` (e.g., explaining that selection requires choosing both a start and end timestamp).
* Apply `aria-invalid="true"` directly to the single trigger element when range validation fails, such as when an end timestamp precedes a start timestamp or a required range is incomplete.
* Link error feedback text directly to the single trigger element using `aria-describedby` and announce live validation updates using an `aria-live="polite"` region.
* Ensure quick preset shortcut buttons inside the popover surface return focus directly to the single trigger element upon selection if the panel auto-closes.