DateRangePicker

Picks a start and end date from a calendar.

Sale period

11272026

11302026

DateRangePicker.tsx

import {DateRangePicker} from 'alinea/components'

export function DateRangePickerExample() {
  return (
    <DateRangePicker
      label="Sale period"
      defaultValue={{start: '2026-11-27', end: '2026-11-30'}}
      style={{width: 300}}
    />
  )
}

Props

PropTypeDefaultDescription

localestring; value?: DateRange | null; defaultValue?: DateRange | null; onValueChange?: (value: DateRange | 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; /** Form field name of the start date */ startName?: string; /** Form field name of the end date */ endName?: 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.