日历

关于

Calendar 组件构建于 React DayPicker 之上。

安装

pnpm dlx shadcn@latest add calendar

用法

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

有关更多信息，请参见 React DayPicker 文档。

日期选择器

您可以使用 <Calendar> 组件构建日期选择器。有关更多信息，请参见 日期选择器 页面。

示例

表单

更新日志

2024-03-11 day_outside 颜色

• 更改了 day_outside 类的颜色，以改善对比度：

  calendar.tsx

  "day_outside:
        "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",

  Copy