Date Picker

A date field that opens a calendar instead of parsing text — plus a range picker with presets.

<DatePicker placeholder="Pick a date" onValueChange={setDate} />

DatePicker is a control that reads the date back and a Calendar in a popover.

There is no text parsing. A field that accepts 3/4/25 has to decide whether that is March or April, and it will be wrong for half the world. If you need typed input, use three NumberFields or a native <input type="date">.

Usage

tsx

import { DatePicker } from "@heyo-sh/heyo-ui";<DatePicker value={date} onValueChange={setDate} placeholder="Pick a date" />;

Ranges

DatePicker.Range selects two dates and closes itself once the range is complete. presets earn their keep here: nine times out of ten the answer is "last 7 days", and clicking twice in a grid to say so is a small tax on every visit.

<DatePicker.Rangeplaceholder="Pick a range"presets={[  { label: "Last 7 days", range: () => ({ from: daysAgo(7), to: new Date() }) },  { label: "Last 30 days", range: () => ({ from: daysAgo(30), to: new Date() }) },]}onValueChange={setRange}/>

In a field

Starts on

Local time.

<Field label="Starts on" description="Local time."><DatePicker placeholder="Pick a date" /></Field>

Bounds

min, max and disabledDate are passed straight to the calendar, so the popup cannot offer a date the field would reject.

<DatePickersize="sm"placeholder="Pick a weekday"disabledDate={(day) => day.getDay() === 0 || day.getDay() === 6}/>

Properties

DatePicker

value / defaultValueDate | nulloptional

Controlled and uncontrolled selection.

onValueChange(date: Date | null) => voidoptional

Fires when a day is chosen or cleared.

placeholderstringoptional

Shown while nothing is selected.

size"xs" | "sm" | "base" | "lg"optional

Control height. It defaults to base.

min / maxDateoptional

Bounds, passed to the calendar.

disabledDate(date: Date) => booleanoptional

An extra rule on top of the bounds.

localestringoptional

Used for the calendar's names and for formatting the value.

weekStartsOn0 | 1optional

0 is Sunday, 1 is Monday. It defaults to 1.

disabledbooleanoptional

Dims the control and ignores interaction.

id / aria-labelstringoptional

Accessibility wiring when there is no visible label.

DatePicker.Range

Everything above, with a range-shaped value, plus:

value / defaultValueDateRangeoptional

{ from, to }, both Date | null.

onValueChange(range: DateRange) => voidoptional

Fires on each end of the range.

presets{ label, range }[]optional

Shortcut rows down the left side. range is a function returning a DateRange, so "last 7 days" is computed when it is clicked, not when the page rendered.

twoMonthsbooleanoptional

Shows two months side by side. It defaults to true.

Loading documentation…