Date Picker

Input-triggered date picker with three variants: click-to-pick, date range, and a typed DD/MM/YYYY field. The calendar drops below the input (or above if space is tight), animated with a blurred slide. For the standalone calendar component, see Calendar.

Installation

npx stepwise-ui add date-picker

Date

Pick a date

Date range

Pick a date range

Date of birth

import { DatePicker } from '@/components/stepwise/date-picker'

// Single date
const [date, setDate] = useState<Date | null>(null)
<DatePicker variant="date" label="Date" value={date} onChange={setDate} />

// Date range
const [from, setFrom] = useState<Date | null>(null)
const [to,   setTo]   = useState<Date | null>(null)
<DatePicker
  variant="range"
  label="Date range"
  from={from}
  to={to}
  onRangeChange={(f, t) => { setFrom(f); setTo(t) }}
/>

// Typed date (DD/MM/YYYY) - also has a calendar icon to open the picker
const [dob, setDob] = useState<Date | null>(null)
<DatePicker variant="text" label="Date of birth" value={dob} onChange={setDob} />

Variants

PropTypeDescription

date

variant

Click the input to open a calendar. Selecting a date fills the input and closes the picker.

range

variant

Opens a range calendar. First click sets start, second sets end. Hover previews the range.

text

variant

Type a date as DD/MM/YYYY. The calendar icon also opens the visual picker - both update the same value.

Props

PropTypeDescription

variant

"date" | "range" | "text"

Picker variant. Default: "date".

label

string

Label shown above the input.

placeholder

string

Placeholder text. Defaults to a sensible value per variant.

value

Date | null

Controlled date value (date and text variants).

onChange

(date: Date | null) => void

Called when the date changes.

from

Date | null

Range start date (range variant).

to

Date | null

Range end date (range variant).

onRangeChange

(from: Date | null, to: Date | null) => void

Called when either range endpoint changes.

className

string

Additional classes for the outer wrapper.