DateInput

Text input with calendar popup for date selection. Supports single dates and date ranges with optional preset quick filters. Built on Input, Calendar, and Menu components.

Import

import { DateInput } from 'reablocks';

DateInput Props

Extends Input props (except value and onChange), plus:

Single Date

const [date, setDate] = useState(new Date());
<DateInput value={date} onChange={setDate} />

Date Range

const [range, setRange] = useState<[Date, Date]>([startDate, endDate]);
<DateInput value={range} isRange onChange={setRange} />

With Presets

const presets: PresetOption[] = [
  { label: 'Today', value: new Date() },
  { label: 'Last 7 days', value: () => [subDays(new Date(), 7), new Date()] }
];

<DateInput value={date} preset={presets} onChange={setDate} />

When presets are provided, a list of options is shown first. Selecting "Custom Date" opens the full calendar.

Custom Format

<DateInput value={date} format="yyyy-MM-dd" onChange={setDate} />

The input placeholder automatically shows the format in uppercase (e.g. MM/DD/YYYY). Users can type dates directly — the input parses them using the format string.