FORMS

DatePicker

Single-date picker that pairs a Memphis-styled trigger with the react-day-picker calendar inside a Popover. Locale defaults to Italian; pass any DayPicker prop through to override.

Import

import { DatePicker } from 'damo-ui'

Basic usage (uncontrolled)

<DatePicker placeholder="Seleziona una data" />

Controlled

Manage the selection externally to react to changes (validation, persistence, syncing across fields).

1function ControlledExample() {
2  const [date, setDate] = useState<Date | undefined>()
3  return <DatePicker value={date} onValueChange={setDate} />
4}

Custom format

Pass any date-fns format string to formatStr.

<DatePicker formatStr="dd/MM/yyyy" />

Props

DatePicker props
PropTypeDefaultDescription
valueDate—Controlled selected date. Pair with onValueChange.
onValueChange(date: Date | undefined) => void—Fires when the user picks a day. Receives undefined when the date is cleared.
placeholderReactNode'Seleziona una data'Trigger text shown when no date is selected.
formatStrstring'PPP'date-fns format string used for the trigger label.
disabledboolean—Disables the trigger.
idstring—Forwarded to the trigger button (useful for label association).
classNamestring—Class name on the wrapper div.
triggerClassNamestring—Class name on the trigger button itself.

Native form submission

DatePicker renders a <button> + popover, not a native <input type="date">, and ships no hidden form input. To submit the value through a traditional <form>, manage the date with React state and either render your own hidden input or post the value via FormData in the submit handler.

Accessibility

  • The calendar inherits react-day-picker's ARIA wiring (grid + day cells with aria-selected).
  • Wrap with FormField (or supply your own label) so the field is announced to screen readers.
  • Keyboard: Space/Enter opens the popover, arrow keys navigate days, Esc closes it.
← SelectCombobox →