ThorUI文档

# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-steps 步骤条 →