120k
New

日历

PreviousNext

允许用户选择日期或日期范围的日历组件。

Base UIReact AriaRadix UI

August 2026

26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
"use client"

import * as React from "react"

安装

pnpm dlx shadcn@latest add calendar

用法

import {
  getLocalTimeZone,
  today,
  type CalendarDate,
} from "@internationalized/date"
 
import { Calendar } from "@/components/ui/calendar"
const [date, setDate] = React.useState<CalendarDate | null>(
  today(getLocalTimeZone())
)
 
return (
  <Calendar value={date} onChange={setDate} className="rounded-lg border" />
)

如需了解更多信息，请参阅 React Aria 文档。

日期选择器

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

国际日历

要使用波斯历、伊斯兰历或佛历等国际日历系统，请使用 React Aria 的 I18nProvider 设置区域设置。

۱۴۰۴ جوزا

۲۷
۲۸
۲۹
۳۰
۳۱
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۱
۲
۳
۴
۵
۶
"use client"

import * as React from "react"

基础

一个基础的日历组件。我们使用 className="rounded-lg border" 为日历设置样式。

August 2026

26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
"use client"

import { Calendar } from "@/components/ui/calendar"

范围日历

使用 RangeCalendar 组件启用范围选择。

January to February 2026

28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
"use client"

import * as React from "react"

月份和年份选择器

使用 captionLayout="dropdown" 显示月份和年份下拉菜单。

August 2026

26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
"use client"

import { Calendar } from "@/components/ui/calendar"

预设

August 2026

26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
"use client"

import * as React from "react"

日期和时间选择器

August 2026

26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
"use client"

import * as React from "react"

已预订日期

February 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
"use client"

import * as React from "react"

自定义单元格大小

December 2026

29
30
1$100
2$100
3$100
4$100
5$120
6$120
7$100
8$100
9$100
10$100
11$100
12$120
13$120
14$100
15$100
16$100
17$100
18$100
19$120
20$120
21$100
22$100
23$100
24$100
25$100
26$120
27$120
28$100
29$100
30$100
31$100
1
2
"use client"

import * as React from "react"

你可以使用 --cell-size CSS 变量自定义日历单元格的大小。还可以通过使用特定断点的值使其具有响应式效果：

<Calendar
  value={date}
  onChange={setDate}
  className="rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
/>

或者使用固定值：

<Calendar
  value={date}
  onChange={setDate}
  className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
/>

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

另请参阅 国际日历指南，了解如何启用波斯历 / 回历 / 贾拉利历等国际日历。

أغسطس 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
"use client"

import * as React from "react"

API 参考

有关 Calendar 组件的更多信息，请参阅 React Aria 文档。