noora/docs/components/datepicker.md
Selects a date range with a two-month calendar, optional presets, and editable range fields.
<noora-date-picker label="Select date range"></noora-date-picker>
| 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. |
| Property | Type or allowed values | Default | Description |
|---|---|---|---|
presets | Array<Record<string, unknown>> | [] | Defines presets programmatically when declarative noora-date-picker-preset children are not used. |
| 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. |
| Slot | Description |
|---|---|
default | Declarative noora-date-picker-preset children. |
actions | Additional footer actions. |
| Part | Description |
|---|---|
trigger | The range trigger. |
content | The picker content. |
calendar | The calendar and range controls. |
month | One calendar month. |
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".
Open the picker with common presets and footer actions.
<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>