Skip to main content
PolyUI/docs
中文

Form

Calendar

A calendar component built on react-day-picker, supporting single, multiple, and range selection with customizable locale, formatting, and appearance.

Installation

bash
pnpm dlx shadcn@latest add calendar -c packages/react

Basic

June 2026

6/19/2026

tsx
import { useState } from "react"
import { Calendar } from "@polyui/react/calendar"
export function CalendarBasic() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <div className="space-y-2 text-center">
      <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-xl border border-border" />
      {date && <p className="text-sm text-muted-foreground">{date.toLocaleDateString("en-US")}</p>}
    </div>
  )
}

Range

June 2026
July 2026
tsx
import { Calendar } from "@polyui/react/calendar"
export function CalendarRange() {
  return (
    <div className="space-y-2 text-center">
      <Calendar mode="range" numberOfMonths={2} className="rounded-xl border border-border" />
    </div>
  )
}

Props

属性类型默认值说明
mode"single" | "multiple" | "range"—Selection mode.
selectedDate | Date[] | DateRange | undefined—Currently selected date(s) (controlled).
onSelect(date: ...) => void—Date selection callback.
showOutsideDaysbooleantrueWhether to show days outside the current month.
captionLayout"label" | "dropdown" | "dropdown-months" | "dropdown-years""label"How the month/year caption is displayed.
localeLocale—date-fns locale for localized display.
numberOfMonthsnumber1Number of months to display at once.