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
components/date-picker.json
{
"name": "DatePicker",
"tagName": "noora-date-picker",
"elementClassName": "NooraDatePicker",
"className": "noora-date-picker",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Selects a date range with a two-month calendar, optional presets, and editable range fields.",
"usage": "<noora-date-picker label=\"Select date range\"></noora-date-picker>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "Select date range",
"description": "Sets the trigger label when no range is selected."
},
{
"name": "name",
"property": "name",
"type": "string",
"description": "Sets the submitted field-name prefix for `[start]` and `[end]` values."
},
{
"name": "start",
"property": "start",
"type": "string",
"description": "Sets the start date in year-month-day format."
},
{
"name": "end",
"property": "end",
"type": "string",
"description": "Sets the end date in year-month-day format."
},
{
"name": "min",
"property": "min",
"type": "string",
"description": "Sets the earliest selectable date."
},
{
"name": "max",
"property": "max",
"type": "string",
"description": "Sets the latest selectable date."
},
{
"name": "selected-preset",
"property": "selectedPreset",
"type": "string",
"description": "Identifies the selected preset."
},
{
"name": "start-of-week",
"property": "startOfWeek",
"type": "number",
"default": 0,
"description": "Sets the first weekday, where zero is Sunday and one is Monday."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables interaction."
},
{
"name": "open",
"property": "open",
"type": "boolean",
"default": false,
"reflect": true,
"description": "Controls whether the picker is open."
}
],
"properties": [
{
"name": "presets",
"type": "json",
"typescriptType": "Array<Record<string, unknown>>",
"default": [],
"description": "Defines presets programmatically when declarative noora-date-picker-preset children are not used."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "",
"description": "Declarative noora-date-picker-preset children."
},
{
"name": "actions",
"description": "Additional footer actions."
}
],
"cssParts": [
{
"name": "trigger",
"description": "The range trigger."
},
{
"name": "content",
"description": "The picker content."
},
{
"name": "calendar",
"description": "The calendar and range controls."
},
{
"name": "month",
"description": "One calendar month."
}
],
"events": [
{
"name": "noora-open-change",
"type": "CustomEvent<{ open: boolean }>",
"description": "Emitted when the date picker opens or closes."
},
{
"name": "noora-period-change",
"type": "CustomEvent<{ start: string; end: string; preset: string | undefined }>",
"description": "Emitted when a date range is applied."
},
{
"name": "noora-cancel",
"type": "CustomEvent<Record<string, never>>",
"description": "Emitted when date selection is cancelled."
}
],
"notes": [
"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\"."
],
"examples": [
{
"id": "default",
"title": "Default date picker",
"description": "Open the picker with common presets and footer actions.",
"markup": "<noora-date-picker selected-preset=\"7d\">\n <noora-date-picker-preset value=\"1h\" start=\"2026-07-27\" end=\"2026-07-27\">Last 1 hour</noora-date-picker-preset>\n <noora-date-picker-preset value=\"24h\" start=\"2026-07-26\" end=\"2026-07-27\">Last 24 hours</noora-date-picker-preset>\n <noora-date-picker-preset value=\"7d\" start=\"2026-07-21\" end=\"2026-07-27\">Last 7 days</noora-date-picker-preset>\n <noora-date-picker-preset value=\"30d\" start=\"2026-06-28\" end=\"2026-07-27\">Last 30 days</noora-date-picker-preset>\n <noora-date-picker-preset value=\"custom\">Custom</noora-date-picker-preset>\n <noora-button slot=\"actions\" type=\"button\" variant=\"secondary\" size=\"medium\" data-action=\"cancel\">Cancel</noora-button>\n <noora-button slot=\"actions\" type=\"button\" variant=\"primary\" size=\"medium\" data-action=\"apply\">Apply</noora-button>\n</noora-date-picker>"
}
]
}