Skip to content

Date Picker

A date field: a 44px button that opens a Calendar. A single date closes on pick; a range waits for both ends.

Sourcecomponents/date-picker.tsx

One date

A range

A range, future dates only (booking)

Date of birth (month and year menus)

Usage

Date Picker usage
import { useState } from "react";import { DatePicker } from "@/components/date-picker";import { Field, FieldLabel } from "@/components/field";
export function DatePickerUsage() {  const [date, setDate] = useState<Date | undefined>();  return (    <Field>      <FieldLabel>Start date</FieldLabel>      <DatePicker value={date} onValueChange={setDate} />    </Field>  );}

When to use

Use when

A date or a date range in a form, inside a Field. Shows "October 15th, 2026". For bookings, block past days with calendarProps={{ disabled: { before: today } }}; leave ranges open for reports and history

Don’t use when

Typing a time or a phrase like "next Friday" (not supported); a date the user already knows exactly and types faster, such as a card expiry (use Input)