Delphi Design

Select dates with a visual calendar interface.

Demo

Single date

Date range

With year dropdown

Usage

import { DatePicker } from "@delphi/ui";

export function Example() {
  const [date, setDate] = useState<Date>();

  return (
    <DatePicker
      date={date}
      onDateChange={setDate}
      placeholder="Pick a date"
      autoClose
    />
  );
}

Date Range

import { DateRangePicker } from "@delphi/ui";

export function Example() {
  const [range, setRange] = useState();

  return (
    <DateRangePicker
      dateRange={range}
      onDateRangeChange={setRange}
      numberOfMonths={2}
      autoClose
    />
  );
}

API Reference

DatePicker

Prop	Type	Default	Description
`date`	`Date`	-	Selected date
`onDateChange`	`(date: Date \| undefined) => void`	-	Called when date changes
`placeholder`	`string`	`"Pick a date"`	Placeholder text
`autoClose`	`boolean`	`false`	Close popover on date selection
`captionLayout`	`"dropdown" \| "buttons" \| "dropdown-buttons"`	-	Month/year navigation style
`fromYear`	`number`	-	Earliest selectable year (for dropdown)
`toYear`	`number`	-	Latest selectable year (for dropdown)
`fromDate`	`Date`	-	Earliest selectable date
`toDate`	`Date`	-	Latest selectable date
`disabled`	`(date: Date) => boolean`	-	Function to disable specific dates

DateRangePicker

Prop	Type	Default	Description
`dateRange`	`{ from: Date; to?: Date }`	-	Selected date range
`onDateRangeChange`	`(range) => void`	-	Called when range changes
`numberOfMonths`	`number`	`2`	Number of calendar months to display
`autoClose`	`boolean`	`false`	Close popover when full range is selected
`placeholder`	`string`	`"Pick a date range"`	Placeholder text

Use autoClose for simple single-date selection flows

Use captionLayout="dropdown" with fromYear/toYear for birthdates

Disable past dates with fromDate={new Date()} for future-only selection

Use a date picker for time selection — use a time input instead

Show more than 2 months at once — it overwhelms users