Calendar
A date field component that lets users enter and edit dates.
Installation
npx shadcn@latest add @uqudo/calendarInstalling it also installs Button, which it depends on. The calendar itself is built on React DayPicker, which is added as an npm dependency.
Usage
import { Calendar } from "@/components/uqudo/ui/calendar"const [date, setDate] = React.useState<Date | undefined>(new Date())
<Calendar mode="single" selected={date} onSelect={setDate} />The component is a thin wrapper around DayPicker: every DayPicker prop
(mode, selected, onSelect, disabled, numberOfMonths, locale, ...)
passes straight through. It only adds styling and a few defaults.
Examples
Range
Set mode="range" and hold a DateRange ({ from, to }) in state. Show two
months side by side with numberOfMonths={2}.
API Reference
Calendar
Prop
Type
CalendarDayButton
The button rendered for each day. It is wired in through components.DayButton
and exported so you can extend it, for example to add a marker under certain
dates.
Prop
Type
Data attributes
| Attribute | Element | Value |
|---|---|---|
data-slot | root | Always calendar. |
data-day | day button | The day formatted with toLocaleDateString(locale). |
data-selected-single | day button | true when selected outside a range. |
data-range-start | day button | true on the first day of a selected range. |
data-range-middle | day button | true on days strictly inside a selected range. |
data-range-end | day button | true on the last day of a selected range. |