chainlit icon indicating copy to clipboard operation
chainlit copied to clipboard

Date Picker Input Widget

Open Allaoua9 opened this issue 1 week ago • 1 comments
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

  1. Validated text inputs – Still leaves users typing dates and guessing formats.

Allaoua9 avatar Nov 14 '25 09:11 Allaoua9