TkxDatePicker

Single date

Pick a date

Selected: (none)

import { TkxDatePicker } from 'tekivex-ui';

const [date, setDate] = useState<Date | null>(null);

<TkxDatePicker
  label="Pick a date"
  value={date}
  onChange={setDate}
/>

Range mode

Range with built-in presets

Trip dates

(no range selected)

const [range, setRange] = useState<[Date | null, Date | null]>([null, null]);

<TkxDatePicker
  label="Trip dates"
  mode="range"
  value={range}
  onChange={setRange}
/>

Built-in presets

<TkxDatePicker
  mode="range"
  value={range}
  onChange={setRange}
  showPresets   // Today, Yesterday, Last 7/30/90 days, This/Last week, This/Last month
/>

Preset labels follow the active locale (currently localised in 17 languages with English fallback).

Custom presets

<TkxDatePicker
  mode="range"
  showPresets
  customPresets={[
    {
      label: 'Q1 2026',
      getValue: () => [new Date(2026, 0, 1), new Date(2026, 2, 31)],
    },
    {
      label: 'Q2 2026',
      getValue: () => [new Date(2026, 3, 1), new Date(2026, 5, 30)],
    },
  ]}
/>

Min / max bounds

<TkxDatePicker
  label="Birthday"
  minDate={new Date(1900, 0, 1)}
  maxDate={new Date()}            // can't pick future dates
  value={date}
  onChange={setDate}
/>

With time

<TkxDatePicker
  showTime
  timeValue={time}
  onTimeChange={setTime}
  value={date}
  onChange={setDate}
/>

Format

The display format follows the active locale via Intl.DateTimeFormat. To override:

<TkxDatePicker
  dateFormat="yyyy-MM-dd"   // ISO-style, locale-independent
  value={date}
  onChange={setDate}
/>

Accessibility

• Trigger button has localised aria-label (e.g. “Select a date” / “تاريخ منتخب کریں”)
• Calendar grid uses role="grid" with aria-rowcount / aria-colcount
• Each day cell has role="gridcell" with aria-selected, aria-disabled
• Keyboard:
  • Arrows — move by day
  • Page Up / Down — next/previous month
  • Shift+Page Up / Down — next/previous year
  • Home / End — start / end of week
  • Enter / Space — select
  • Escape — close calendar
• Disabled dates skipped during keyboard navigation

Date format & locale

By default, the input format follows the user’s locale (e.g. MM/DD/YYYY in en-US, DD/MM/YYYY in en-GB). Override with dateFormat if you need a fixed format across locales.

Props

Prop	Type	Required	Description
value	Date | null | [Date | null, Date | null]		Single date or range.
onChange	(value) => void		Selection change.
mode	'single' | 'range'		Defaults to single.
minDate / maxDate	Date		Bounds.
showTime	boolean		Render time picker alongside calendar.
showPresets	boolean		Show built-in preset shortcuts (range mode).
customPresets	DatePreset[]		Override preset list.
dateFormat	string		Override locale-driven format.
placeholder	string		Defaults to localised placeholder.
disabled	boolean
isInvalid	boolean

Source

src/components/TkxDatePicker.tsx