Skip to content

Date Picker Input Widget #2652

@Allaoua9

Description

@Allaoua9

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.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions