DatePicker

The DatePicker component wraps the Calendar in a popover with a trigger button, providing a complete date selection interface. It supports all Calendar modes including single date, multiple dates, and date ranges.

Features

• Popover-based date selection
• Trigger button with formatted date display
• All Calendar selection modes (single, multiple, range)
• Automatic date formatting
• Customizable placeholder text
• All Calendar props supported

Usage

import { DatePicker } from '@loke/design-system/date-picker';

export default function Example() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return (
    <DatePicker
      mode="single"
      selected={date}
      onSelect={setDate}
      placeholder="Pick a date"
    />
  );
}

Tips:

• The trigger button displays the selected date(s) formatted.
• For range mode, both dates are shown with a separator.
• For multiple dates, it shows a count when more than one is selected.

Props

All additional props are passed to the underlying Calendar component. See Calendar documentation for minDate, maxDate, disabled, and other options.

Examples

Single date picker

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

<DatePicker
  mode="single"
  selected={date}
  onSelect={setDate}
  placeholder="Select a date"
/>

Range date picker

const [range, setRange] = useState<DateRange | undefined>();

<DatePicker
  mode="range"
  selected={range}
  onSelect={setRange}
  numberOfMonths={2}
  placeholder="Select date range"
/>

Date picker with constraints

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

<DatePicker
  mode="single"
  selected={date}
  onSelect={setDate}
  minDate={new Date()}
  maxDate={addDays(new Date(), 30)}
  placeholder="Select within next 30 days"
/>

Accessibility

• Button trigger has proper focus states.
• Popover is keyboard accessible.
• Calendar within popover supports full keyboard navigation.
• Dates are properly announced to screen readers.
• Disabled dates are communicated.

Best practices

• Use a descriptive placeholder that indicates what date is expected.
• Set appropriate date constraints with minDate/maxDate for valid ranges.
• For date ranges, use numberOfMonths={2} to show both months side by side.
• Consider pairing with Label for form accessibility.
• Handle undefined selection state for optional date fields.