chainlit
chainlit copied to clipboard
Date Picker Input Widget
trafficstars
Is your feature request related to a problem? Please describe.
Chainlit currently lacks a date picker widget. Teams collecting single dates or ranges must fall back to plain text inputs, which means manual typing, inconsistent formats, no validation, and no visual aid—painful for scheduling, filtering dashboards, reporting windows, or any workflow that relies on precise date ranges.
Describe the solution you'd like
Add a DatePicker input widget that plugs into the existing InputWidget system:
- Modes: single date or range
- Built-in min/max validation plus ISO parsing
- Locale-aware formatting via
date-fns - Optional custom format strings and placeholders
- Accessible calendar popover UI with disabled state support
Backend API Example:
from chainlit.input_widget import DatePicker
from datetime import date
# Single date picker
DatePicker(
id="appointment_date",
label="Select Appointment Date",
mode="single",
initial="2024-12-25",
min_date="2024-01-01",
max_date="2025-12-31",
format="PPP", # date-fns format string
placeholder="Pick a date"
)
# Date range picker
DatePicker(
id="report_period",
label="Select Report Period",
mode="range",
initial=("2024-01-01", "2024-12-31"),
min_date="2020-01-01",
max_date="2025-12-31",
placeholder="Pick a date range"
)
Describe alternatives you've considered
- Validated text inputs – Still leaves users typing dates and guessing formats.