Date picker
A native date input with year, month and day strips.
The server names the weekday of the date you pick.
Each preview is its own Live page in a frame, because this site is a Vue 3.5 app built on the Pulsar starter kit. An open list or popover stays inside its frame; in your application it opens over the page.
Installation
suprnova live:add date-pickerUsage
{% import "suprnova-ui/date-picker/date-picker.html" as date_picker %}
{% call date_picker::date_picker("when", "Date", years, months, days, min="2026-01-01", max="2028-12-31", value=when) %}{% endcall %}Examples
Bounded range
The input offers the last quarter of 2026, and the server refuses any other date.
Keyboard and accessibility
suprnova.date-picker - a native date input with year, month and day strips (FORM-007). The input accepts only a date (type date, min and max when given) and carries the model; it is the control. The strips are native radio groups inside CSS scroll-snap containers: tapping, clicking and the arrow keys move the selection with no script. sn-date-picker (date-picker.js) composes a strip selection into the input's value and mirrors the input back onto the strips; with the script absent the input still takes the date and the strips still select. The wrapper is keyed with live:preserve.self, so its upgrade marker survives a morph. value is the island's current date (FORM-009), and authority marks a server correction (Live spec 12). Classification: varies with the island.
API reference
date_picker
| Parameter | Default | Description |
|---|---|---|
name | Required | The `String` model field, an ISO date. |
label | Required | The visible label. |
years | Required | The years the year strip offers. |
months | Required | The twelve month names, January first; a month's value is its position. |
days | Required | The days the day strip offers. |
min | Required | The earliest date, ISO. |
max | Required | The latest date, ISO. |
value | "" | The island's current value of the field, so the control shows it. |
authority | "" | A correction sequence. When set, this render replaces the visitor's unsent edit. |