Date Picker

A date picker component with popover calendar for selecting dates.

Date

Date & Time

With Input

Installation

CLI

Install the component using the StarUI CLI:

star add date-picker

Examples

Trip Planner

A booking scenario with a range picker for check-in/check-out dates and a presets picker for quick departure selection. The computed nights readout updates reactively.

Plan Your Trip

Select your travel dates and departure

Check-in / Check-out

Departure date

Schedule a Meeting

DateTimePicker composed with an Input for meeting title. The readout combines both signals into a formatted summary.

Schedule a Meeting

Pick a date, time, and add a title

Meeting title

Date & time

Date of Birth

A profile form pattern using caption_layout='dropdown' for quick month/year navigation — ideal for dates far from today.

Date of birth

States

Disabled and custom-width variants.

Disabled

Custom width

API Reference

Props

Prop	Type	Default	Description
`mode`	`Literal['single', 'range', 'multiple']`	`'single'`	Selection mode for the date picker
`caption_layout`	`Literal['label', 'dropdown']`	`'label'`	Calendar header style — 'label' shows text, 'dropdown' shows month/year selects
`selected`	`str \| list[str] \| None`	`None`	Initially selected date(s)
`placeholder`	`str`	`'Pick a date'`	Placeholder text when no date is selected
`disabled`	`bool`	`False`	Whether the date picker is disabled
`signal`	`str \| Signal`	`''`	Custom signal prefix for the date picker
`width`	`str`	`'w-[280px]'`	Tailwind width class for the trigger button
`with_presets`	`bool`	`False`	Show preset date options (Today, Tomorrow, In a week) — single mode only
`cls`	`str`	`''`	Additional CSS classes

Component	Description
`DateTimePicker`	Date + time picker with hour/minute dropdowns and AM/PM toggle. Exposes .datetime, .date, and .time signals.
`DatePickerWithInput`	Text input with calendar popover fallback. Accepts typed dates in YYYY-MM-DD format. Exposes .selected signal.