Skip to main content
PolyUI/docs
English

表单组件

日历

基于 react-day-picker 的日历组件，支持单选、多选、范围选择，可自定义语言、格式化和外观。

安装

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

基础

June 2026

6/18/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>
  )
}

范围选择

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>
  )
}

属性

属性类型默认值说明
mode"single" | "multiple" | "range"—选择模式。
selectedDate | Date[] | DateRange | undefined—当前选中的日期（受控）。
onSelect(date: ...) => void—日期选择回调。
showOutsideDaysbooleantrue是否显示当月以外的日期。
captionLayout"label" | "dropdown" | "dropdown-months" | "dropdown-years""label"月份/年份标题的显示方式。
localeLocale—date-fns 语言包，用于本地化显示。
numberOfMonthsnumber1同时显示的月份数量。