Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/datepicker.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# DatePicker
Selects a date range with a two-month calendar, optional presets, and editable range fields.
```html
<noora-date-picker label="Select date range"></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` | `Array<Record<string, unknown>>` | `[]` | 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
| 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
<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>
```