Tune UI多选日期选择器组件
多选日期选择器组件允许用户选择多个日期或日期范围。支持不同的日期格式化选项、多种选择模式和快捷选项功能。
基础用法
多选日期选择器提供了两种选择模式：日期范围选择和多个日期选择。
范围选择模式
选择的日期范围：2025-11-10, 2025-11-17
多选模式
选择的多个日期：2025-11-10, 2025-11-13, 2025-11-17
显示代码
不同模式
组件支持多种选择模式：日期、月份和年份。
日期模式 (date)
所选日期：未选择
月份模式 (month)
所选月份：未选择
年份模式 (year)
所选年份：未选择
显示代码
不同尺寸
组件提供了三种尺寸：small、default、large。
小尺寸 (small)
默认尺寸 (default)
大尺寸 (large)
显示代码
不同状态
组件可以设置为禁用状态，也可以通过 disabled-date 函数自定义禁用特定日期。
禁用状态 (disabled)
选择的日期：2025-11-10, 2025-11-17
禁用日期 (disabledDate)
选择的日期：未选择
今天之前的日期已被禁用
显示代码
格式化
可以使用 value-format 和 format 分别控制值的格式和显示格式。
值格式化 (valueFormat: YYYY/MM/DD)
格式化后的值：[]
类型：-
显示格式化 (format: YYYY年MM月DD日)
选择的日期：未选择
显示代码
日期时间选择
设置 show-time 属性可以在选择日期的同时选择时间。
日期时间选择
选择的日期时间：未选择
显示代码
快捷选项
通过 shortcuts 属性可以设置快捷选项，提供预设的日期选择。
带快捷选项的日期范围选择
选择的日期范围：未选择
可用快捷选项：最近一周、最近一个月、最近三个月
显示代码
自定义位置
通过 position 属性可以设置下拉面板的弹出位置。
顶部弹出 (top)
底部弹出 (bottom)
左侧弹出 (left)
右侧弹出 (right)
显示代码
事件处理
多选日期选择器提供了多种事件，如 change、clear、focus 等。
事件处理示例
当前值：未选择
事件记录:
显示代码
多选日期选择器组件 API
属性
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| v-model | 绑定值 | Date[] | string[] | number[] | — | [] |
| mode | 日期选择器模式 | string | date / month / year | date |
| disabled | 是否禁用 | boolean | — | false |
| disabled-date | 不可选择的日期 | (date: Date) => boolean | — | — |
| show-time | 是否显示时间选择器 | boolean | — | false |
| value-format | 值的格式化 | string | — | — |
| format | 显示格式化 | string | — | — |
| placeholder | 占位符 | string | — | — |
| clearable | 是否可清空 | boolean | — | true |
| position | 弹出位置 | string | top / bottom / left / right | bottom |
| size | 尺寸 | string | small / default / large | default |
| is-range | 是否为范围选择模式 | boolean | — | false |
| shortcuts | 快捷选项列表 | ShortcutType[] | — | — |
| is-tip | 是否显示提示 | boolean | — | true |
| tip-text | 提示文本 | string | — | — |
| tip-position | 提示位置 | string | top / bottom / left / right | — |
ShortcutType 类型
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 快捷选项标签 | string | — | — |
| value | 快捷选项值 | DateType[] | (() => DateType[]) | — | — |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 日期变化时触发 | (value: Date[] | string[] | number[]) |
| panel-change | 面板变化时触发 | (mode: 'date | month | year') |
| clear | 清空时触发 | — |
| focus | 获得焦点时触发 | — |
| blur | 失去焦点时触发 | — |
| date-dialog-open | 日期对话框打开时触发 | — |
| date-dialog-close | 日期对话框关闭时触发 | — |
插槽
| 插槽名 | 说明 | 作用域参数 |
|---|---|---|
| prefix | 输入框前缀内容 | — |
| date | 自定义日期单元格 | { date: Date } |
| footer | 日历面板底部区域 | — |
样式变量
多选日期选择器组件使用了以下样式变量，可通过 SCSS 变量进行自定义：
| 变量名 | 说明 |
|---|---|
| $border-color-default | 边框颜色 |
| $bg-color-default | 背景色 |
| $theme-color-primary | 主题色 |
| $text-color-default | 文本颜色 |
| $font-size-small | 小号字体大小 |
| $font-size-default | 默认字体大小 |
| $font-size-large | 大号字体大小 |
| $bg-color-hover | 悬停背景色 |