import {
DatePicker,
DatePickerCalendar,Installation#
pnpm dlx shadcn@latest add junwen-k/ui-x/date-picker
Examples#
Date Picker#
import {
DatePicker,
DatePickerCalendar,Input#
import {
DatePicker,
DatePickerCalendar,Form#
Schedule your event by selecting a start and end date.
import { Button } from "@/components/ui/button";
import {
Card,Accessibility#
Labeling#
The trigger and clear buttons in the input variant are icon-only. <DatePickerInput /> ships a visually hidden "Clear date" label for the clear button; when composing your own icon-only triggers, give them an accessible name with aria-label or a visually hidden <span className="sr-only">.
Keyboard interactions#
The inline date field follows the segment keyboard model described in the Date Time Field accessibility section. Inside the popover, the calendar supports the arrow keys to move between days, PageUp / PageDown to change months and Enter to select. Escape closes the popover and returns focus to the trigger.
API Reference#
Styled wrappers around the Date Picker primitive. Each part forwards its props to the primitive part it wraps — see the primitive page for the full prop tables.
DatePicker#
Wraps Root and accepts all of its props (mode, value, onValueChange, formatStr, month, required, disabled, …).
DatePickerTrigger#
Wraps Trigger, rendered as an outline <Button /> with a calendar icon.
DatePickerValue#
Wraps Value, muting the placeholder text. Accepts placeholder.
DatePickerInput#
An Input Group containing the inline date field plus clear and open buttons. Renders a single-date field or a range field automatically based on the root's mode; the inline field is not supported in "multiple" mode. Accepts the corresponding DateField / DateRangeField props.
DatePickerAnchor#
Wraps Anchor for positioning the popover against a custom element.
DatePickerContent#
Wraps Portal, Positioner and Content with popover styling, and lifts the common positioning props.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" | "center" | "end" | "start" | Alignment against the anchor. |
alignOffset | number | 4 | Offset along the alignment axis. |
side | "top" | "bottom" | "left" | "right" | "bottom" | Side of the anchor to render against. |
sideOffset | number | 0 | Distance from the anchor. |
...props | Content props | - | Remaining props spread to the content part. |
DatePickerCalendar#
Wraps Calendar, rendering the styled Calendar component. Accepts the styled calendar's props.