Date picker

The Date picker is a two-month React date-range control. It supports keyboard-focusable dates, adjacent-month navigation, range preview on hover, clear, today, and an optional Apply step for filters.

It uses React and date-fns. It is part of the nausikaa package; import it from nausikaa/date-picker. Pass controlled startDate and endDate values (or null) and receive changes through onChange(startDate, endDate).

Set inline when the range picker should be visible as part of a form or dialog. A selection is reported as soon as the second date is chosen; select a new date after completing a range to start over.

import DatePicker from "nausikaa/date-picker";

const [range, setRange] = useState({ start: null, end: null });

<DatePicker
  inline
  startDate={range.start}
  endDate={range.end}
  onChange={(start, end) => setRange({ start, end })}
/>;

Without inline, the component becomes a compact trigger and dropdown panel, matching the Scout date filter pattern. Picks remain temporary until Apply; Clear resets the controlled range and closes the panel.

<DatePicker
  startDate={startDate}
  endDate={endDate}
  label="Filter by date"
  onChange={(start, end) => setFilters({ startDate: start, endDate: end })}
/>;

The picker always displays two consecutive months. Previous and next controls move them together, while Today returns the left calendar to the current month. Use the From and To date fields in the footer when an exact date is quicker to type; entering the dates in reverse order automatically normalizes the selected range. Dates outside a displayed month are shown only to complete the calendar grid and cannot be selected.