Calendar

Composition preview

Try Calendar alongside its related fields & validation components. These examples keep all actions local.

Usage

import { Calendar } from "@/components/ui/calendar";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

<>
<Calendar mode="single" selected={date} onSelect={setDate} />
<Field>
  <FieldLabel htmlFor="publishing-time">Time</FieldLabel>
  <Input id="publishing-time" type="time" step={60} />
</Field>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

React DayPicker props: mode, selected, onSelect, month/onMonthChange, disabled matchers, today, locale; CalendarDayButton; buttonVariant

Usage & accessibility

Keep keyboard navigation and accessible day labels. Convert civil dates without UTC shifts. Pair with Input type=time for the official date-and-time composition; scheduling stays in the product layer.

Implementation contract

src/components/ui/calendar.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.