TUI

0.3.7
DatePicker 时间选择组件
支持基础渲染、自定义节假日、调休日、高亮选中等功能的日历展示组件。
基础用法
一
二
三
四
五
六
日
一
二
三
四
五
六
日
示例代码
vue
<template>
  <TsCalendar />
</template>
属性 Props
属性名
说明
类型
可选值
默认值
版本说明
defaultActiveDay
当前选中日期
String | Date | null
null
yearlyHolidays
年假数据
Object<YearHoliday>
{}
injectedMonthData
月份数据
Array
[]
showTooltip
是否显示提示
Boolean
true / false
false
shadow
是否显示阴影边框
Boolean | String | Null
true / "" / null
false
事件 Events
事件名
说明
类型
change
选中日期
year: string, month: string, day: number, status: 0 | 1 | 2 | 3, name: string, statusName: string, dayCn: string | undefined, nameCn: string | undefined, monthCn: string | undefined, yearCn: string | undefined, animal: string | undefined, enableTip: boolean | undefined, content: string | undefined
插槽 Slots
插槽名
说明
tooltip
自定义 tooltip 内容
YearHoliday props
属性名
说明
类型
可选值
默认值
year
年份
string
-
Array<HolidayItem[]>
HolidayItem props
属性名
说明
类型
可选值
默认值
year
年份
string
-
month
月份
string
-
day
日期
number
-
name
名称
string
-
status
状态
0 | 1 | 2 | 3
-
statusName
状态名称
string
-
enableTip
是否显示提示
boolean
-
content
提示内容
string
-