日历

关于

¥About

Calendar 组件构建在 React DayPicker 之上。

¥The Calendar component is built on top of React DayPicker.

安装

¥Installation

pnpm dlx shadcn@latest add 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"
  />
)

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

¥See the React DayPicker documentation for more information.

日期选择器

¥Date Picker

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

¥You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.

示例

¥Examples

表单

¥Form

更新日志

¥Changelog

11-03-2024 day_outside 颜色

¥11-03-2024 day_outside color

• 将 day_outside 类的颜色更改为以下内容以提高对比度：

  ¥Changed the color of the day_outside class to the following to improve contrast:

  calendar.tsx

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

  Copy