Calendar 日历

示例

默认情况下，单击日期可以选中一个日期。

配置 multiple 属性时，可以选择多个日期。配置 range 属性时，可以选择一个日期范围。

同时配置 multiple 及 range 属性时，可以选择多段日期范围。配置 panel 属性时，可以指定日历面板的数量。两次选择的时间段合并的策略为，若从未选日期开始选择则选中该时段，否则则取消选择该时段。

名称	类型	默认值	描述
`type`	`string=`	`'date'`	日历的类型，可用值为 `'date'` / `'month'` / `'year'`，分别对应日期/月/年视图。
`multiple`	`boolean=`	`false`	是否可以选择多个日期（范围）。
`range`	`boolean=`	`false`	是否选择日期范围。
`selected`	`Date	Array=`	-
`panel`	`number=`	`1`	日历面板数量。
`today`	`Date=`	`new Date()`	「今天」的日期。
`week-start`	`number=`	`calendar.weekStart`	一周的起始。可进行全局配置。
`fill-month`	`boolean=`	`true`	当只有一个面板时，是否要在当前月份面板显示非本月日期。
`date-class`	`string	Array	Object
`disabled-date`	`function(Date, Date=): boolean=`	`() => false`	用于自定义指定日期是否禁用。第一个参数为需要判断是否禁用的日期。当处于范围选择过程中且已经选择了一个日期，会作为第二个参数传入。
`disabled`	`boolean=`	`false`	是否为禁用状态。
`readonly`	`boolean=`	`false`	是否为只读状态。

^^^selected :::badges v-model :::

已选日期（范围）的值，根据 multiple 和 range 属性值的不同，数据格式不同。

+++类型详情

^^^slot-date 单日单元格内的区域，可用来定制每一天对应区域的内容。

默认内容：对应日期的 date。

+++作用域参数

名称	描述
`select`	[^event-select]
`selectstart`	选择日期范围时，选择完起始日期时触发，回调参数 `(picking: Date)`，表示已选的起始项日期。
`selectprogress`	[^event-selectprogress]
`viewchange`	面板显示的月份发生变化时触发。回调参数 `(month: Object<{year: number, month: number, index: number}>)`，表示当前年月（`month` 为 `0` 表示一月）。

^^^event-select :::badges v-model :::

选择修改后触发，回调参数为 (selected)。数据类型和 selected 属性一致。 ^^^

^^^event-selectprogress 选择日期范围时，在已经选择开始日期后，通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 (picking)，表示当前标记的日期范围，类型取决于 multiple 属性的值。

+++参数详请

名称	类型	默认值	描述
`calendar.weekStart`	`number`	`1`	一周的第一天是星期几。周一到周日分别对应 `1` 到 `7`。