DatePicker

DatePicker is a field that opens a calendar popover (built on react-day-picker) for choosing a date. It is controlled, and the mode prop switches behavior: in the default 'single' mode value is a Date | undefined and onChange returns the selected date; in 'range' mode value is a DateRange ({ from, to }). Add a label and placeholder for the field.

Example

Preview

import { DatePicker } from '@officina/ui';
import { useState } from 'react';

function DueDate() {
  const [date, setDate] = useState<Date | undefined>();
  return <DatePicker label="Due date" value={date} onChange={setDate} placeholder="Pick a date" />;
}

API

Prop	Type	Default	Description
onChange*	((date: Date \| undefined) => void) \| ((range: DateRange \| undefined) => void)	—	Called with the newly selected date. Called with the newly selected range.
value*	Date \| DateRange \| undefined	—	Selected date, or `undefined` when empty (controlled). Selected start/end range, or `undefined` when empty (controlled).
disabled	boolean	—
invalid	boolean	—	Marks the field invalid for validation styling and `aria-invalid`.
label	string	—	Field label shown above the input.
mode	enum	—	Single-date selection mode (default). Date-range selection mode.
name	string	—	Form field name, for native form submission / form libraries.
placeholder	string	—	Placeholder text when no date is selected. Placeholder text when no range is selected.

Example

API

On this page