日历

一个允许用户输入和编辑日期的日期字段组件。

Component Source API Reference
October 2025
28
29
30
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
Event Date, October 2025

关于 ​

<Calendar /> 组件基于 Reka UI Calendar 组件构建，该组件使用 @internationalized/date 包来处理日期。

如果你正在寻找范围日历，查看 Range Calendar 组件。

安装 ​

pnpm dlx shadcn-vue@latest add calendar

TIP

该组件依赖 @internationalized/date 包，能够解决在 JavaScript 中处理日期和时间时遇到的许多问题。请查看 Dates & Times in Reka UI 以获取更多信息和安装说明。

日期选择器 ​

你可以使用 <Calendar /> 组件来构建日期选择器。查看 Date Picker 页面获取更多信息。

示例 ​

表单 ​

Your date of birth is used to calculate your age.

高级自定义 ​

月份与年份选择器 ​

28
29
30
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
Event Date, October 2025
Edit this page on GitHub