Date Picker

Examples

Overview

The picker grid is the Calendar component, which wraps react-day-picker v9 with Rogo styling. All DayPicker props pass through: selection modes, min/max dates, disabled matchers, multiple months, localization, and custom formatters.

import { Calendar } from "@rogo-technologies/ui/calendar";

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

<Calendar mode="single" selected={date} onSelect={setDate} />;

Usage

Selection modes

mode controls what selected / onSelect operate on: a Date (single), a Date[] (multiple), or a DateRange (range).

import { Calendar, type DateRange } from "@rogo-technologies/ui/calendar";

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

<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />;

Disabling dates

disabled accepts a Matcher or array of matchers: weekdays, ranges, predicates, or explicit dates.

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  disabled={[{ dayOfWeek: [0, 6] }, { before: new Date() }]}
/>

Month and year dropdowns

captionLayout="dropdown" replaces the caption label with month and year selects. Bound the years with startMonth / endMonth.

<Calendar
  mode="single"
  captionLayout="dropdown"
  startMonth={new Date(2000, 0)}
  endMonth={new Date(2035, 11)}
  selected={date}
  onSelect={setDate}
/>

Date picker field

There is intentionally no DatePicker component. Compose Popover, Button, and Calendar.

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    <Button variant="outline" prefix={<IconCalendar1 />}>
      {date ? format(date, "PPP") : "Pick a date"}
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0" align="start">
    <Calendar mode="single" selected={date} onSelect={selectDate} />
  </PopoverContent>
</Popover>

API

All other react-day-picker props pass through unchanged.

Guidelines

Do

• Use Calendar for anything that picks dates, since it ships keyboard navigation and ARIA grid semantics from react-day-picker
• Compose date picker fields from Popover + Button + Calendar
• Bound the year dropdown with startMonth / endMonth when using captionLayout="dropdown"

Don't

• Don't rebuild date selection on top of calendar-core. That's what Calendar is for
• Don't reach for react-day-picker directly in apps; import from @rogo-technologies/ui/calendar so styling stays consistent
• Don't use a picker for readonly month views. Build those on Calendar's calendar-core utilities