DatePicker

A date field with a calendar popover.

Launch date

1012026

DatePicker.tsx

import {DatePicker} from 'alinea/components'

export function DatePickerExample() {
  return (
    <DatePicker
      label="Launch date"
      defaultValue="2026-10-01"
      min="2026-09-24"
      style={{width: 240}}
    />
  )
}

Props

PropTypeDefaultDescription

localestring; /** The selected date, `YYYY-MM-DD` */ value?: string | null; defaultValue?: string | null; onValueChange?: (value: string | null) => void; /** The earliest selectable date, `YYYY-MM-DD` */ min?: string; /** The latest selectable date, `YYYY-MM-DD` */ max?: string; /** Returns true for dates that cannot be selected, receives `YYYY-MM-DD` */ disabledDates?: (date: string) => boolean; name?: string; autoFocus?: boolean;Default –BCP 47 locale used to format dates, eg. en-GB, defaults to the user's locale

labelReactNodeDefault –

descriptionReactNodeDefault –

errorReactNodeDefault –

requiredbooleanDefault –

disabledbooleanDefault –

readOnlybooleanDefault –

iconIconType | ReactElementDefault –

sharedbooleanDefault –Marks the field as shared between translations

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.