Skip to Content

‘use client’

Calendar

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

February 2026

Installation

npx shadcn@latest add @uipath/calendar

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" /> )

Examples

Date Range

<Calendar mode="range" selected={dateRange} onSelect={setDateRange} numberOfMonths={2} />