日历组件

日历组件用于展示和选择日期，支持多种视图模式、日期格式化和自定义样式。

基础用法

最简单的用法是提供一个双向绑定的日期值，组件会显示当前月份的日历并允许选择日期。

当前选中日期: 2025/11/10 16:31:35

显示代码

不同视图模式

Calendar组件支持三种视图模式：日期(date)、月份(month)、年份(year)，可以通过mode属性来指定。

日期模式

月份模式

年份模式

日期模式: 2025/11/10 16:31:35

月份模式: 2025/11/10 16:31:35

年份模式: 2025/11/10 16:31:35

显示代码

格式化输出

Calendar组件支持通过value-format属性指定日期的输出格式，组件将返回指定格式的字符串而不是Date对象。

日期格式化 (YYYY-MM-DD)

日期时间格式化 (YYYY-MM-DD HH:mm:ss)

中文格式化 (YYYY年MM月DD日)

日期格式化：2023-07-15 (类型: string)

日期时间格式化：2023-07-15 12:30:00 (类型: string)

中文格式化：2023年07月15日 (类型: string)

显示代码

自定义日期单元格

通过插槽date自定义日期单元格的内容和样式，可以添加假日标记、活动标记等。

当前选中日期: 2025/11/10 16:31:35

周末/假日

当前选中

显示代码

禁用日期

通过disabled-date属性可以指定哪些日期不可选择，该属性接收一个函数，返回true表示禁用。

禁用今天之前的日期

禁用周末

禁用今天之前: 2025/11/10 16:31:35

禁用周末: 2025/11/10 16:31:35

禁用规则说明：

- 第一个日历中，今天之前的日期已被禁用

- 第二个日历中，周末（周六和周日）已被禁用

显示代码

时间选择器

通过设置show-time属性可以开启时间选择功能，可以同时选择日期和时间。

带时间选择

禁用时间视图（自动同步当前时间）

启用时间视图（可手动选择时间）

带时间选择: 2025-11-10 16:31:35

禁用时间视图: 2025-11-10 16:31:35

启用时间视图: 2025-11-10 16:31:35

说明：

- 禁用时间视图：点击日期后不会显示时间选择面板，使用系统当前时间

- 启用时间视图：点击日期后会显示时间选择面板，可以手动选择时间

显示代码

自定义底部

通过插槽footer可以自定义日历底部内容，例如添加快捷按钮。

当前选中日期: 2025/11/10 16:31:35

当前面板模式: date

事件记录:

显示代码

日历 API

属性

属性名	说明	类型	可选值	默认值
v-model	绑定值	Date / string / number	—	—
mode	日历模式	string	date / month / year	date
disabled	是否禁用	boolean	—	false
disabled-date	不可选择的日期	function(date: Date)	—	—
show-time	是否显示时间选择器	boolean	—	false
disabled-time-view	是否禁用时间选择视图	boolean	—	true
value-format	值的格式化，例如 YYYY-MM-DD	string	—	—
is-select	是否可以选择日期	boolean	—	true

事件

事件名	说明	回调参数
change	日期变化	(value: Date / string / number)
panel-change	面板模式变化	(mode: 'date' / 'month' / 'year')
jump-to-date	跳转到指定日期	(date: Date)
time-change	时间变化	(date: Date)
time-dialog-open	时间对话框打开	—
time-dialog-close	时间对话框关闭	—

插槽

插槽名	说明	作用域参数
date	自定义日期单元格内容	{ date: Date }
month	自定义月份单元格内容	{ month: number, index: number }
year	自定义年份单元格内容	{ year: number }
footer	自定义日历底部内容	—
time-picker	自定义时间选择器	—

方法

组件暴露了以下方法，可以通过ref调用：

方法名	说明	参数
jumpToDate	跳转到指定日期	(date: Date)
switchPanelMode	切换面板模式	(mode: 'date' / 'month' / 'year')
currentYear	获取当前年份（计算属性）	-
currentMonth	获取当前月份（计算属性）	-
tempMode	获取当前临时模式	-

样式变量

日历组件使用了以下样式变量，可通过CSS变量进行自定义：

变量名	说明	默认值
--t-calendar-bg-color	日历背景色	#fff
--t-calendar-border-color	日历边框颜色	#e4e7ed
--t-calendar-text-color	日历文本颜色	#303133
--t-calendar-date-hover-bg	日期悬停背景色	#f2f6fc
--t-calendar-date-active-bg	日期激活背景色	#409eff
--t-calendar-date-active-color	日期激活文本颜色	#fff
--t-calendar-disabled-bg	禁用日期背景色	#f5f7fa
--t-calendar-disabled-color	禁用日期文本颜色	#c0c4cc