Date Picker

Selects a date range with a two-month calendar, optional presets, and editable range fields.

DatePicker web component

Selects a date range with a two-month calendar, optional presets, and editable range fields.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Default date picker

Open the picker with common presets and footer actions.

Last 1 hour

Last 24 hours

Last 7 days

Last 30 days

Custom

Cancel

Apply

<noora-date-picker selected-preset="7d">
  <noora-date-picker-preset value="1h" start="2026-07-27" end="2026-07-27">Last 1 hour</noora-date-picker-preset>
  <noora-date-picker-preset value="24h" start="2026-07-26" end="2026-07-27">Last 24 hours</noora-date-picker-preset>
  <noora-date-picker-preset value="7d" start="2026-07-21" end="2026-07-27">Last 7 days</noora-date-picker-preset>
  <noora-date-picker-preset value="30d" start="2026-06-28" end="2026-07-27">Last 30 days</noora-date-picker-preset>
  <noora-date-picker-preset value="custom">Custom</noora-date-picker-preset>
  <noora-button slot="actions" type="button" variant="secondary" size="medium" data-action="cancel">Cancel</noora-button>
  <noora-button slot="actions" type="button" variant="primary" size="medium" data-action="apply">Apply</noora-button>
</noora-date-picker>

Attributes

Attribute	Type or allowed values	Default	Description
`label`	string	`"Select date range"`	Sets the trigger label when no range is selected.
`name`	string	`None`	Sets the submitted field-name prefix for `[start]` and `[end]` values.
`start`	string	`None`	Sets the start date in year-month-day format.
`end`	string	`None`	Sets the end date in year-month-day format.
`min`	string	`None`	Sets the earliest selectable date.
`max`	string	`None`	Sets the latest selectable date.
`selected-preset`	string	`None`	Identifies the selected preset.
`start-of-week`	number	`0`	Sets the first weekday, where zero is Sunday and one is Monday.
`disabled`	boolean	`false`	Disables interaction.
`open`	boolean	`false`	Controls whether the picker is open.

Properties

Property	Type or allowed values	Default	Description
`presets`	json	`[]`	Defines presets programmatically when declarative noora-date-picker-preset children are not used.

Events

Event	Type	Description
`noora-open-change`	`CustomEvent<{ open: boolean }>`	Emitted when the date picker opens or closes.
`noora-period-change`	`CustomEvent<{ start: string; end: string; preset: string \| undefined }>`	Emitted when a date range is applied.
`noora-cancel`	`CustomEvent<Record<string, never>>`	Emitted when date selection is cancelled.

Slots

Name	Description
`default`	Declarative noora-date-picker-preset children.
`actions`	Additional footer actions.

Styling parts

Name	Description
`trigger`	The range trigger.
`content`	The picker content.
`calendar`	The calendar and range controls.
`month`	One calendar month.

Behavior

A picker named `range` submits its dates as `range[start]` and `range[end]`.

Range changes emit a `noora-period-change` event after Apply is selected.

Cancel emits a `noora-cancel` event.

Slotted action buttons can use data-action="cancel" or data-action="apply".