date-picker

Accessible, internationalised date picker — segmented field + popover calendar.

Pairs a @fluixi/date-field segmented input with a @fluixi/calendar popover over one shared value. Typing in the field and picking in the calendar stay in sync; choosing a day closes the popover. Locale drives everything — segment order, separators, calendar system, month/weekday names.

Installation

pnpm add @fluixi/date-picker

Usage

import {
  DatePicker,
  DatePickerLabel,
  DatePickerField,
  DatePickerContent,
} from '@fluixi/date-picker';

<DatePicker locale="en-US" onChange={console.log}>
  <DatePickerLabel>Pick a date</DatePickerLabel>
  <DatePickerField />
  <DatePickerContent />
</DatePicker>

DatePickerField renders the segmented input plus a calendar trigger button; DatePickerContent is the popover, which shows a default calendar bound to the shared value (pass children to override it).

Date range picker

DateRangePicker pairs two segmented fields (start / end) with a popover range calendar over one shared { start, end } value. Each endpoint holds its own partial entry; the committed value stays null until both ends are set.

import {
  DateRangePicker,
  DateRangePickerLabel,
  DateRangePickerField,
  DateRangePickerContent,
} from '@fluixi/date-picker';

<DateRangePicker locale="en-US" onChange={(r) => console.log(r?.start, r?.end)}>
  <DateRangePickerLabel>Trip dates</DateRangePickerLabel>
  <DateRangePickerField />
  <DateRangePickerContent />
</DateRangePicker>

Parts mirror the single picker: DateRangePicker, DateRangePickerLabel, DateRangePickerField, DateRangePickerTrigger, DateRangePickerContent, DateRangePickerCalendar. Props match DatePicker except value / defaultValue / onChange use DateRange ({ start, end }).

Props (DatePicker)

Parts