Calendar

A date field component that allows users to enter and edit date.

Installation

npx shadcn@latest add https://exawizards.com/exabase/design/registry/calendar.json

Usage

import { Calendar } from "@/components/ui/calendar"

const [date, setDate] = React.useState<Date | undefined>(new Date())
 
return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-md border"
  />
)

See the React DayPicker (opens in a new tab) documentation for more information.

Date Picker

The Date Picker is built using a composition of the <Popover /> and the <Calendar /> components.

See installation instructions for the Popover components.

Examples

Date Picker

Date Range Picker

Form