Back to Components

Calendar

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

inputs
date
selection
date-picker

Preview

SuMoTuWeThFrSa

Code

TSX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useState } from "react"
import { Calendar } from "@/components/ui/calendar"

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

API Reference

PropTypeDefaultDescription
modesingle | multiple | rangesingleThe selection mode of the calendar.
selectedDate | Date[] | DateRange-The selected date or dates.
onSelectfunction-Function called when a date is selected.
disabledDate[] | ((date: Date) => boolean)-Dates that are disabled and cannot be selected.
View Full Documentation