跳到主要内容

日历 Calendar

用于选择日期,或日期区间。

用法示例

基础用法

<ti-calendar id="ti-calendar"></ti-calendar>

设置边界

<ti-calendar id="ti-calendar" min-date="2022-02-10" max-date="2023-02-10"></ti-calendar>

设置默认值

<ti-calendar id="ti-calendar" default-value="2022-04-10"></ti-calendar>

受控模式

<ti-calendar id="ti-calendar" value="2022-04-10"></ti-calendar>

多选

<ti-calendar id="ti-calendar" mode="multiple"></ti-calendar>

多选 - 最多个数

<ti-calendar id="ti-calendar" mode="multiple"></ti-calendar>

范围

<ti-calendar id="ti-calendar" mode="range"></ti-calendar>

范围 - 最大范围

<ti-calendar id="ti-calendar" mode="range"></ti-calendar>

范围 - 允许起止同天

<ti-calendar id="ti-calendar" mode="range"></ti-calendar>

ti-calendar API

属性 Properties

名称类型必填默认值说明备注
startWeekDayEnum'Sunday'从周几开始;参数类型 WeekDayEnum
modesingle | multiple | range'single'单选/多选/范围-
default-valuearray | string | numbernull默认值,传值则组件设置为非受控模式-
valuearray | string | numbernull值,则组件设置为受控模式-
min-datestring | number当天最小日期范围,可转 Date 即可-
max-datestring | number从当天起 6 个月最大日期范围,可转 Date 即可-
positiontop | bottom | left | rightbottom展示位置,透传给 popup.position-
close-on-maskbooleantrue点击遮罩关闭,透传给 popup.close-on-mask-
use-popupbooleantrue是否使用弹窗-
destroy-on-closebooleanfalse关闭后销毁组件,透传给 popup.destroyOnClose-
confirm-textstring确认确认文案;传空字符串''则不展示按钮-
visiblebooleanfalse是否展示,透传给 popup.visible-
allow-same-daybooleanfalse起止日期是否可用是同一天;range 模式下生效-
max-rangenumber0起止日期最大跨度天数; range 模式且大于 0 下生效-
max-sizenumber0最多可选天数 ; multiple 模式且大于 0 下生效-
colorstring#2580FF选中颜色值-
roundbooleanfalse圆角模式-
titlestring'选择日期'标题-
formatter(date: CalRenderDateProps) => CalRenderDatePropsnull格式化日历函数,参数类型 CalRenderDateProps-
ext-stylestring''容器样式-
mask-z-indexnumber10000遮罩 z-index 层级-
content-z-indexnumber10001内容 z-index 层级-

事件 Events

名称参数列表描述备注
select(e: CustomEvent<{date: CalDateProps; currentDate: CalRenderDateProps[];}>) => void日历面板选择事件参数类型见 CalDatePropsCalRenderDateProps
confirm(e: CustomEvent<CalRenderDateProps[]>) => void日历面板确认事件参数见 CalRenderDateProps
close(e: CustomEvent) => void日历面板关闭事件-
error(e: CustomEvent<{error: CalErrorProps; date: CalDateProps; currentDate: CalRenderDateProps[]; }>) => void日历面板错误事件参数类型见 CalErrorPropsCalRenderDatePropsCalRenderDateProps

外部样式类 External Classes

类名说明备注
ext-popup-classpopup 容器样式,透传给 popup/ext-class-
ext-popup-mask-classpopup 遮罩样式,透传给 popup/ext-mask-class-
ext-popup-content-classpopup 内容样式,透传给 popup/ext-content-class-
ext-class日历组件容器样式-
ext-scroll-class日历组件滚动容器样式-

CSS 变量 CSS Variables

变量默认值说明
--calendar-popup-mask-bg-color默认值Popup 组件 --popup-mask-bg-color
--calendar-popup-radius默认值Popup 组件 --popup-popup-radius
--calendar-popup-box-bg-color默认值Popup 组件 --popup-box-bg-color
--calendar-scroll-height500rpx日历滚动区域高度
--calendar-week-height60rpx日历星期区域高度
--calendar-week-item-colorvar(--neutral-color-2, #757575)日历星期区域字体颜色
--calendar-title-height80rpx日历标题区域高度
--calendar-title-colorvar(--neutral-color-4, #c4c4c4)日历标题区域字体颜色
--calendar-date-text-colorvar(--neutral-color-1, #212121)日历时间区域日期字体颜色
--calendar-date-info-colorvar(--neutral-color-3, #9e9e9e)日历时间区域描述字体颜色
--calendar-date-select-colorvar(--neutral-color-9, #ffffff)日历时间区域选中字体颜色
--calendar-date-select-radiuscalc(var(--capsule-radius-size, 0rpx) + 8rpx)日历时间区域选中圆角
--calendar-date-disabled-colorvar(--neutral-color-4, #c4c4c4)日历时间区域禁用颜色
--calendar-date-margin-v10rpx日历时间区域垂直方向距离
--calendar-date-margin-h0rpx日历时间区域水平方向距离

数据结构 Data Structure

星期枚举 WeekDayEnum

含义备注
Sunday周日-
Monday周一-
Tuesday周二-
Wednesday周三-
Thursday周四-
Friday周五-
Saturday周六-

日期数据结构 CalDateProps

键名说明类型
date日期Date
time毫秒数number
yearnumber
monthmonth
daynumber
week星期number
full-date-num年月日,如20211231number
text文本string | number
status状态DateStatusEnum
top-info顶部文案string
bottom-info底部文案string

日期渲染数据结构 CalRenderDateProps

interface CalRenderDateProps extends CalDateProps {
parentIndex: number;
}

报错数据结构 CalErrorProps

interface CalErrorProps {
message: string;
type: 'maxSize' | 'maxRange' | 'disabled';
}

日期状态枚举 DateStatusEnum

枚举值说明
null无状态
disabled禁用
single单选选中状态
range_start范围选择:起始状态
range_full范围选择:起始时间与结束时间为同一天
range_end范围选择:结束状态
multiple孤立多选(无连接)
multiple_start多选(有连接) 起始状态
multiple_middle多选(有连接) 中间状态
mulitiple_end多选(有连接) 结束状态