@xsolla/xui-date-picker

Date and date-range picker with a calendar popover and localised month/year navigation.

Installation

yarn add @xsolla/xui-date-picker

Usage

import { DatePicker } from '@xsolla/xui-date-picker';

<DatePicker
  selectedDate={new Date()}
  onChange={(date) => console.log(date)}
/>

{/* Range mode */}
<DatePicker
  selectsRange
  startDate={start}
  endDate={end}
  onChange={([start, end]) => setRange([start, end])}
/>

Props

DatePicker

| Prop | Type | Default | Description | |------|------|---------|-------------| | onChange | (date: Date \| DateRangeType) => void | — | Called when the selected date or range changes | | selectedDate | Date \| null | — | Currently selected date (single mode) | | selectsRange | boolean | false | Enables date-range selection mode | | startDate | Date \| null | — | Range start date | | endDate | Date \| null | — | Range end date | | size | "xl" \| "lg" \| "md" \| "sm" \| "xs" | "md" | Size of the input | | placeholder | string | "MM/DD/YYYY" | Input placeholder text | | disabled | boolean | — | Disables the input | | locale | CalendarLocaleType | "enUS" | date-fns locale key for calendar localisation | | minDate | Date \| null | — | Earliest selectable date | | maxDate | Date \| null | — | Latest selectable date |