# tui-calendar 日历
介绍
可选择单个日期,可选择日期区间(可跨年跨月),支持设置日期可选范围,支持设置状态。
特别说明
日历组件中引入了 tui-button
按钮组件,使用此组件需要同时将 tui-button
组件引入至项目中。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiCalendar from "@/components/thorui/tui-calendar/tui-calendar.vue"
export default {
components:{
tuiCalendar
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | App-Nvue |
---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | 升级中 |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-calendar": "/components/thorui/tui-calendar/tui-calendar"
}
}
# 代码演示
以下主要演示部分弹层选择模式下的使用,具体可参考示例程序以及文档API。
弹层展示
组件默认为平铺展示,日历会直接展示在页面内,而不是以弹层的形式出现。
设置属性 isFixed
为 true
,则会以弹层的形式出现。
<tui-calendar isFixed></tui-calendar>
是否显示农历
通过 lunar
属性设置是否显示农历,默认为false。
<!--显示农历-->
<tui-calendar lunar></tui-calendar>
选择日期类型
通过 type
属性设置选择日期类型。1-单个日期选择 , 2-日期区间选择。
<!--uni-app-->
<tui-calendar :type="2"></tui-calendar>
<!--微信小程序-->
<tui-calendar type="{{2}}"></tui-calendar>
组件调用
uni-app通过ref (opens new window) 来注册组件引用信息,微信小程序通过 this.selectComponent
获取子组件的实例对象。
组件中提供了 show
方法用来显示日历弹框。
<!--uni-app-->
<tui-calendar ref="calendar" lunar isFixed :type="2" @change="change"></tui-calendar>
<!--微信小程序-->
<tui-calendar id="calendar" type="{{2}}" lunar isFixed bindchange="change"></tui-calendar>
//uni-app 方法调用
selectDate() {
this.$refs.calendar.show();
},
change(e) {
//选择结果
console.log(e);
}
//微信小程序 方法调用
let calendar;
Page({
onReady: function (options) {
calendar = this.selectComponent("#calendar")
},
selectDate(){
calendar.show();
},
change(e) {
//选择结果
console.log(e);
}
})
# Slots
none
# Props
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
arrowType | [Number, String] | 1-切换月份和年份 2-切换月份 | 1 |
type | Number | 1-单个日期选择 2-开始日期+结束日期选择 | 1 |
maxYear | Number | 可切换最大年份 | 2030 |
minYear | Number | 可切换最小年份 | 1920 |
minDate | String | 最小可选日期(不在范围内日期禁用不可选) | 1920-01-01 |
maxDate | String | 最大可选日期,默认最大值为今天 | - |
title V1.7.2+ | String | 选择日期时显示标题 | 日期选择 |
radius | Boolean | 显示圆角 | true |
status | Array | 状态数据,平铺展示时使用, 顺序与当月天数一致,index=>day | [ ] |
monthArrowColor | String | 月份切换箭头颜色 | #999 |
yearArrowColor | String | 年份切换箭头颜色 | #bcbcbc |
color | String | 默认日期字体颜色 | #333 |
activeBgColor | String | 选中 起始结束日期背景色 | #5677fc |
activeColor | String | 选中 起始结束日期字体颜色 | #fff |
rangeBgColor | String | 范围内日期背景色 | rgba(86,119,252,0.1) |
rangeColor | String | 范围内日期字体颜色 | #5677fc |
startText | String | type=2时生效,起始日期自定义文案 | 开始 |
endText | String | type=2时生效,结束日期自定义文案 | 结束 |
btnType | String | 按钮样式类型 | primary |
isFixed | Boolean | 是否固定底部弹出选择 | false |
isActiveCurrent | Boolean | 当前选中日期带选中效果 | true |
isChange | Boolean | 切换年月是否触发事件 type=1时生效 | false |
lunar | Boolean | 是否显示农历 | false |
initStartDate | String | 初始化起始选中日期 格式: 2020-06-06 或 2020/06/06 【type=1 or 2】 | - |
initEndDate | String | 初始化结束日期 格式: 2020-06-06 或 2020/06/06【type=2】 | - |
属性 status 状态数据Object参数说明
[{
text:"", //描述:2字以内
value:"",//状态值
bgColor:"",//背景色
color:"", //文字颜色
check:false //是否显示对勾
}]
# Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 选择日期后点击确认按钮时触发 | 返回日期数据,数据格式可切换至控制台查看console打印 |
hide | 关闭日历弹层时触发 | {} |
# Methods
方法名 | 说明 | 传入参数 |
---|---|---|
show | 显示日历弹层,具体使用请查看 组件调用 介绍 | - |
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |