HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Date PickerView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorShows a month, and takes a date from it.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/date-picker'import'@fusion.dev/helix-headless/date-picker'Preview
API ReferenceRoothelix-date-pickerShows a month, and takes a date from it.
PropTypeDefaultDescriptiondefaultMonthstring""Month to open on, where nothing declared one.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.disableDatesstring""Dates that cannot be chosen, comma separated, as `YYYY-MM-DD`.disableDaysstring""Days of the week that cannot be chosen, comma separated, `0` to `6`.firstDayOfWeeknumber0First column of the week, `0` for Sunday through `6` for Saturday.invalidbooleanfalseWhether the current selection fails validation.labelstring"Date Picker"Accessible name for the grid.localestring""Locale for month and day names.maxstring""Latest selectable date, as `YYYY-MM-DD`.minstring""Earliest selectable date, as `YYYY-MM-DD`.mode"range"|"multiple"How many dates can be held at once.monthstringThe month on show, as `YYYY-MM`. Follows `value`, then the current month.monthsnumber1How many months to show, side by side.namestring""Name submitted with the form.nextLabelstring"Next month"Accessible name for the control that pages forward.previousLabelstring"Previous month"Accessible name for the control that pages back.readOnlybooleanfalseWhether the control refuses changes while still submitting its value.requiredbooleanfalseWhether the form refuses to submit while nothing is chosen.stepnumber1How far apart the selectable dates are, in days.valuestringWhat the control holds now, and what its form submits.valueAsDateDate|nullThe value as a `Date`, at midnight UTC, or `null` while there is no date.valueAsNumbernumberThe value as milliseconds since the epoch, or `NaN` while there is no date.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionnext-iconThe glyph on the control that moves forward a month, usually a caret.previous-iconThe glyph on the control that moves back a month, usually a caret.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the dates change, and cancelable.helix-navigateHelixNavigateEventFired before the month on show changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionrequestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptioncellOne column of a row, which is what a range paints.dayThe shape inside a cell, which is what a single date paints.gridThe grid of days.headerThe month name and its controls.headingThe month and year being shown.monthOne month, its header and its grid.monthsThe run of months.nextThe control that moves to the next month.next-markThe glyph on the next month control, where none is slotted.previousThe control that moves to the previous month.previous-markThe glyph on the previous month control, where none is slotted.weekOne row of days.weekdayA column header naming a day of the week.
CSS PropertyDescription--date-picker-column-countHow many month columns are drawn, capped at two. `--date-picker-columns` overrides it.--date-picker-columnsMonths per row. Two unless there is only one.--date-picker-day-sizeWidth and height of a day.--date-picker-range-colorBand behind the days in a range.--date-picker-row-sizeHeight of a week row.--date-picker-selected-colorFill behind a selected day.--date-picker-track-sizeWidth of a column, which is what sets the space between days.
Roothelix-headless-date-pickerShows a month, and takes a date from it.
PropTypeDefaultDescriptiondefaultMonthstring""Month to open on, where nothing declared one.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.disableDatesstring""Dates that cannot be chosen, comma separated, as `YYYY-MM-DD`.disableDaysstring""Days of the week that cannot be chosen, comma separated, `0` to `6`.firstDayOfWeeknumber0First column of the week, `0` for Sunday through `6` for Saturday.invalidbooleanfalseWhether the current selection fails validation.labelstring"Date Picker"Accessible name for the grid.localestring""Locale for month and day names.maxstring""Latest selectable date, as `YYYY-MM-DD`.minstring""Earliest selectable date, as `YYYY-MM-DD`.mode"range"|"multiple"How many dates can be held at once.monthstringThe month on show, as `YYYY-MM`. Follows `value`, then the current month.monthsnumber1How many months to show, side by side.namestring""Name submitted with the form.nextLabelstring"Next month"Accessible name for the control that pages forward.previousLabelstring"Previous month"Accessible name for the control that pages back.readOnlybooleanfalseWhether the control refuses changes while still submitting its value.requiredbooleanfalseWhether the form refuses to submit while nothing is chosen.stepnumber1How far apart the selectable dates are, in days.valuestringWhat the control holds now, and what its form submits.valueAsDateDate|nullThe value as a `Date`, at midnight UTC, or `null` while there is no date.valueAsNumbernumberThe value as milliseconds since the epoch, or `NaN` while there is no date.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionnext-iconThe glyph on the control that moves forward a month, usually a caret.previous-iconThe glyph on the control that moves back a month, usually a caret.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the dates change, and cancelable.helix-navigateHelixNavigateEventFired before the month on show changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionrequestValue(next: string) => booleanRefuses every change while read-only. See `readOnly`.
PartDescriptioncellOne column of a row, which is what a range paints.dayThe shape inside a cell, which is what a single date paints.gridThe grid of days.headerThe month name and its controls.headingThe month and year being shown.monthOne month, its header and its grid.monthsThe run of months.nextThe control that moves to the next month.next-markThe glyph on the next month control, where none is slotted.previousThe control that moves to the previous month.previous-markThe glyph on the previous month control, where none is slotted.weekOne row of days.weekdayA column header naming a day of the week.
CSS PropertyDescription--date-picker-column-countHow many month columns are drawn, capped at two. `--date-picker-columns` overrides it.
ExamplesNameDescriptionBoundedA calendar that only goes as far as it is allowed.Controlled MonthThe month on show owned by the page, which is what paging from outside needs.DisabledDisabled, showing its date and refusing to move.EventsPaging the month is a move, and choosing a day is an answer.InvalidThe calendar reporting a date it cannot accept.MultipleSeveral days chosen in one calendar, in a locale that starts on Monday.PreviewA month, with a day already chosen.PreviewA month, with a day already chosen.RangeA start and an end across two months.RestrictedNamed days and whole weekdays taken out of an otherwise open month.