Components

Date picker

A composition, not a component — Popover + Calendar. Kept as a pattern so consumers can tune the trigger to fit the surrounding form.

When to usewhen a date input needs a calendar for context — deadlines, filters, scheduling.

Import

import { Calendar } from "@ravnhq/efni/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@ravnhq/efni/popover"

Single date

const [open, setOpen] = useState(false)
const [date, setDate] = useState<Date | undefined>()

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger
    render={
      <Button variant="outline" className="w-56 justify-start">
        <Icon icon={CalendarIcon} />
        {date ? format(date, "PP") : <span className="text-muted-foreground">Pick a date</span>}
      </Button>
    }
  />
  <PopoverContent className="w-auto p-0" align="start">
    <Calendar mode="single" selected={date} onSelect={(d) => { setDate(d); setOpen(false); }} />
  </PopoverContent>
</Popover>

Date range

Accessibility

Key	Action
`Enter / Space`	Open the calendar; select the focused day.
`Arrow keys`	Move by one day / week.
`PageUp / PageDown`	Previous / next month.
`Escape`	Close the popover.

The trigger should reflect the current value or show a muted placeholder.
For scheduling forms, pair with a numeric input so power users can type the date directly.

Props

Prop	Type	Default	Description
`mode`	`"single" \| "multiple" \| "range"`	—	Enable the selection of a single day, multiple days, or a range of days.
`numberOfMonths`	`number`	—	The number of displayed months.
`disabled`	`Matcher \| Matcher[]`	—	Apply the `disabled` modifier to the matching days. Disabled days cannot be selected when in a selection mode is set.
`…props`	`React.ComponentProps<typeof DayPicker>`	—	Everything Calendar passes to the element it renders.
`Calendar.selected / onSelect`	`Date \| DateRange \| Date[] / (value) => void`	—	Value shape depends on mode.