Examples
Basic
Date picker + time picker side-by-side. Each maintains its own state.
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
Date and time range picker
Two date + time pairs joined by "to" — the end pair stays disabled until a start date is picked, and an error helper appears when the end date lands before the start.
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
to
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
The "to" date must be after the "from" date
Documentation
Date and time picker pattern
Composition — no runtime template. Reach for it when a single ISO datetime value needs picking.
Usage
Combine on submit. Concatenate the date and time values into an ISO 8601 string on form submit
(Alpine: date + 'T' + time + ':00').