Live demo — this example is server-driven; run the showcase locally for the interactive version.
Date picker
A text input + calendar toggle. The runtime template renders the input + toggle and a slot for the calendar popup —
pair with Calendar month for the actual date selection.
Dates outside 2026 flip the control and helper to error.
SundayS
MondayM
TuesdayT
WednesdayW
ThursdayT
FridayF
SaturdayS
Pick a date in 2026 (min 2026-01-01, max 2026-12-31).
The date must fall within 2026.
French
JJ/MM/AAAA with French labels; PF\u2019s controlled sections are React state demos.
SundayS
MondayM
TuesdayT
WednesdayW
ThursdayT
FridayF
SaturdayS
JJ/MM/AAAA — format français. PF's three "controlled" sections are React state demos.
With value
Pre-filled input.
SundayS
MondayM
TuesdayT
WednesdayW
ThursdayT
FridayF
SaturdayS
Disabled
Input and toggle disabled.
Invalid
Bad input flips the form-control and helper text to the error state; picking from the calendar fixes it.
SundayS
MondayM
TuesdayT
WednesdayW
ThursdayT
FridayF
SaturdayS
The date is invalid — pick one from the calendar.
YYYY-MM-DD
Custom widths
Input width via the PF width variable — a fixed 220px picker and a 12ch character-based one.
SundayS
MondayM
TuesdayT
WednesdayW
ThursdayT
FridayF
SaturdayS
SundayS
MondayM
TuesdayT
WednesdayW
ThursdayT
FridayF
SaturdayS
Controlling the calendar state
An external button opens and closes the picker's calendar popover.
SundayS
MondayM
TuesdayT
WednesdayW
ThursdayT
FridayF
SaturdayS
Date range picker
Start and end pickers joined by "to" — picking a start date enables the end picker and pre-fills it with the next day.
SundayS
MondayM
TuesdayT
WednesdayW
ThursdayT
FridayF
SaturdayS
to
SundayS
MondayM
TuesdayT
WednesdayW
ThursdayT
FridayF
SaturdayS
The "to" date must be after the "from" date
Documentation
Date picker props
Parameters accepted by
{#include components/forms/date-picker ... /}.
*
required
Name
Type
Description
*id
String
DOM id.
value / placeholder /
disabled / ariaLabel
String / boolean
Pass-through to the inner <input>.
slot calendar
Qute block
Calendar popup contents — typically a
Calendar month include.
Usage
Compose with Calendar month. The runtime template only renders the input + popup wrapper. Drop a
Calendar month into the calendar slot for the actual picker.
