日历

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

组件源代码 原生 API 参考
2024 年 9 月
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
1
2
3
4
5
事件日期，2024 年 9 月

关于 ​

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

如果您正在寻找范围日历，请查看范围日历组件。

安装 ​

bash
npx shadcn-vue@latest add calendar

提示

该组件依赖于@internationalized/date包，它解决了在 JavaScript 中处理日期和时间时遇到的许多问题。查看Radix Vue 中的日期和时间以获取更多信息和安装说明。

日期选择器 ​

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

示例 ​

表单 ​

Your date of birth is used to calculate your age.

高级定制 ​

月和年选择器 ​

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
1
2
3
4
5
事件日期，2024 年 9 月
在 GitHub 上编辑此页面