日历 Calendar

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

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-calendar": "@titian-design/weapp/calendar/index"
  },
  // titan-cli 搭建的项目
  "usingComponents": {
    "ti-calendar": "platform://titian-mp/ti-calendar"
  }
}

用法示例

基础用法

弹出选择器

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">弹出选择器</ti-button>
<ti-calendar bind:close="toggle" visible="{{visible}}" />

copy

code

Page({
  data: {
    visible: false,
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

设置默认值

弹出选择器

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">弹出选择器</ti-button>
<ti-calendar bind:close="toggle" visible="{{visible}}" defaultValue="{{defaultValue}}" />

copy

code

Page({
  data: {
    visible: false,
    defaultValue: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

多选

弹出选择器

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">弹出选择器</ti-button>
<ti-calendar bind:close="toggle" visible="{{visible}}" mode="multiple" />

copy

code

Page({
  data: {
    visible: false,
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

设置边界

弹出选择器

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">弹出选择器</ti-button>
<ti-calendar bind:close="toggle" visible="{{visible}}" minDate="{{min}}" maxDate="{{max}}" />

copy

code

Page({
  data: {
    visible: false,
    max: new Date(new Date().getFullYear() + 1, new Date().getMonth(), new Date().getDate()).getTime(),
    min: new Date(new Date().getFullYear() - 1, new Date().getMonth(), new Date().getDate()).getTime(),
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

受控模式

弹出选择器

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">弹出选择器</ti-button>
<ti-calendar bind:close="toggle" visible="{{visible}}" value="{{date}}" />

copy

code

Page({
  data: {
    visible: false,
    date: new Date(),
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

选择范围

弹出选择器

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">弹出选择器</ti-button>
<ti-calendar bind:close="toggle" visible="{{visible}}" mode="range"/>

copy

code

Page({
  data: {
    visible: false,
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

ti-calendar API

属性 Properties

名称	类型	必填	默认值	说明	备注
start	WeekDayEnum	否	'Sunday'	从周几开始；	参数类型 WeekDayEnum
mode	single | multiple | range	否	'single'	单选/多选/范围	-
default-value	array | string | number	否	null	默认值，传值则组件设置为非受控模式	-
value	array | string | number	否	null	值，则组件设置为受控模式	-
min-date	string | number	否	当天	最小日期范围，可转 Date 即可	-
max-date	string | number	否	从当天起 6 个月	最大日期范围，可转 Date 即可	-
position	top | bottom | left | right	否	bottom	展示位置，透传给 popup.position	-
close-on-mask	boolean	否	true	点击遮罩关闭，透传给 popup.close-on-mask	-
use-popup	boolean	否	true	是否使用弹窗	-
destroy-on-close	boolean	否	false	关闭后销毁组件，透传给 popup.destroyOnClose	-
confirm-text	string	否	确认	确认文案；传空字符串''则不展示按钮	-
visible	boolean	否	false	是否展示，透传给 popup.visible	-
allow-same-day	boolean	否	false	起止日期是否可用是同一天;range 模式下生效	-
max-range	number	否	0	起止日期最大跨度天数; range 模式且大于 0 下生效	-
max-size	number	否	0	最多可选天数 ; multiple 模式且大于 0 下生效	-
color	string	否	#2580FF	选中颜色值	-
round	boolean	否	false	圆角模式	-
title	string	否	'选择日期'	标题	-
formatter	(date: CalRenderDateProps) => CalRenderDateProps	否	null	格式化日历函数，参数类型 CalRenderDateProps	-
mask-z-index	number	否	10000	遮罩 z-index 层级	-
content-z-index	number	否	10001	内容 z-index 层级	-
ext-style	string	否	''	容器样式	-

事件 Events

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

外部样式类 External Classes

类名	说明	备注
ext-popup-class	popup 容器样式，透传给 popup/ext-class	-
ext-popup-mask-class	popup 遮罩样式，透传给 popup/ext-mask-class	-
ext-popup-content-class	popup 内容样式，透传给 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	theme.borderRadius.r4	同 Popup 组件 --popup-popup-radius
--calendar-popup-box-bg-color	theme.color.gray.background.default	同 Popup 组件 --popup-box-bg-color
--calendar-scroll-height	500px	日历滚动区域高度
--calendar-week-height	60px	日历星期区域高度
--calendar-week-item-color	var(--neutral-color-2, #757575)	日历星期区域字体颜色
--calendar-title-height	80px	日历标题区域高度
--calendar-title-color	theme.color.gray.texticon.250	日历标题区域字体颜色
--calendar-date-text-color	theme.color.gray.texticon.900	日历时间区域日期字体颜色
--calendar-date-text-font-size	theme.fontSize.t6	日历时间区域日期字体字号
--calendar-date-text-font-weight	theme.fontWeight.regular	日历时间区域日期字体字重（未选中）
--calendar-date-select-font-weight	theme.fontWeight.regular	日历时间区域日期字体字重（选中）
--calendar-date-info-color	var(--neutral-color-3, #9e9e9e)	日历时间区域描述字体颜色
--calendar-date-select-color	theme.color.gray.texticon.invert	日历时间区域选中字体颜色
--calendar-date-select-radius	theme.borderRadius.r2	日历时间区域选中圆角
--calendar-date-disabled-color	var(--neutral-color-4, #c4c4c4)	日历时间区域禁用颜色
--calendar-date-margin-v	10px	日历时间区域垂直方向距离
--calendar-date-margin-h	0px	日历时间区域水平方向距离
--calendar-font-weight-semibold	theme.fontWeight.semibold	星期的文字字重
--calendar-tip-font-size	theme.fontSize.t2	天数上方描述文字大小
--calendar-tip-line-height	theme.lineHeight.single.t4	天数上方描述文字行高

数据结构 Data Structure

星期枚举 WeekDayEnum

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

日期数据结构 CalDateProps

键名	说明	类型
date	日期	Date
time	毫秒数	number
year	年	number
month	月	month
day	日	number
week	星期	number
full-date-num	年月日，如20211231	number
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	多选（有连接） 结束状态