Components

Date picker

Composition of Popover + Calendar with a formatted button trigger. Uses date-fns for label formatting. Single-date default; extend for range.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<DatePicker value={date} onChange={setDate} />

When to use

  • Any form field where the user picks a date.
  • Filter row selectors.

When not to use

  • Very rich schedulers — pull in a dedicated library.

Usage

Do
  • Use the placeholder to say what kind of date you expect.
  • Set a value from state, don't rely on the internal Calendar.
Don't
  • Don't ask the user to type dates when the Calendar covers it.