# DatePicker Selects a date range with a two-month calendar, optional presets, and editable range fields. ```html ``` ## 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` | `Array>` | `[]` | 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>` | Emitted when date selection is cancelled. | ## Slots | Slot | Description | | --- | --- | | `default` | Declarative noora-date-picker-preset children. | | `actions` | Additional footer actions. | ## Styling parts | 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". ## Default date picker Open the picker with common presets and footer actions. ```html Last 1 hour Last 24 hours Last 7 days Last 30 days Custom Cancel Apply ```