tui-calendar 日历 开源组件

介绍

可选择单个日期，可选择日期区间(可跨年跨月)，支持设置日期可选范围，支持设置状态。

引入

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="type" @change="change"></tui-calendar>

// data 数据 及 方法
export default {
  data() {
  	return {
  		type:2,
  		result: '',
  		lunarResult:''
  	}
  },
  methods: {
  	//调用此方法打开日历，注：需等组件初始化后调用，避免在onLoad 中调用
  	selectDate() {
  		this.$refs.calendar && this.$refs.calendar.show();
  	},
  	change(e) {
  		console.log(e);
  		if (this.type == 1) {
  			this.result = e.result + ' ' + e.week;
  			let date = `${e.lunar.lYear}-${e.lunar.lMonth}-${e.lunar.lDay}`;
  			this.lunarResult = `${e.lunar.gzYear}年，${e.lunar.gzMonth}月，${e.lunar.gzDay}日 。生肖：${e.lunar.Animal}。日期：${e.lunar.IMonthCn + e.lunar.IDayCn}(${date})`;
  		} else {
  			this.result = `${e.startDate} 至 ${e.endDate}`;
  			let sDate = `${e.startLunar.IMonthCn + e.startLunar.IDayCn}(${e.startLunar.lYear}-${e.startLunar.lMonth}-${e.startLunar.lDay})`;
  			let eDate = `${e.endLunar.IMonthCn + e.endLunar.IDayCn}(${e.endLunar.lYear}-${e.endLunar.lMonth}-${e.endLunar.lDay})`;
  			this.lunarResult = `${sDate} 至 ${eDate}`;
  		}
  	}
  }
}

<!--微信小程序-->
<tui-calendar id="calendar" type="{{type}}" lunar isFixed bindchange="change"></tui-calendar>

// data 数据 及 方法
let calendar;
Page({
  data: {
    type:2,
    result: '',
    lunarResult:''
  },
  onReady: function (options) {
    calendar = this.selectComponent("#calendar")
  },
  //调用此方法打开日历，注：需等组件初始化后调用，避免在onLoad 中调用
  selectDate(){
    calendar && calendar.show();
  },
  change(event) {
      let e = event.detail
      console.log(e)
      if (this.data.type == 1) {
        let date = `${e.lunar.lYear}-${e.lunar.lMonth}-${e.lunar.lDay}`
        this.setData({
          result: e.result + " " + e.week,
          lunarResult: `${e.lunar.gzYear}年，${e.lunar.gzMonth}月，${e.lunar.gzDay}日 。生肖：${e.lunar.Animal}。日期：${e.lunar.IMonthCn + e.lunar.IDayCn}(${date})`
        })
      } else {
        let sDate = `${e.startLunar.IMonthCn + e.startLunar.IDayCn}(${e.startLunar.lYear}-${e.startLunar.lMonth}-${e.startLunar.lDay})`
        let eDate = `${e.endLunar.IMonthCn + e.endLunar.IDayCn}(${e.endLunar.lYear}-${e.endLunar.lMonth}-${e.endLunar.lDay})`
        this.setData({
          result: `${e.startDate} 至 ${e.endDate}`,
          lunarResult: `${sDate} 至 ${eDate}`
        })
      }
    }
})

// Make sure to add code blocks to your code group

Slots

插槽名称	插槽说明
-	-

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 V2.8.0+移除	String	按钮样式类型	primary
btnBgColor V2.8.0+	String	按钮背景颜色	#5677fc
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

注：uni-app端绑定事件使用@前缀，如@change；微信小程序原生使用bind前缀，如bindchange

事件名	说明	回调参数
change	选择日期后点击确认按钮时触发	返回日期数据，数据格式可切换至控制台查看console打印
hide	关闭日历弹层时触发	{}

Methods

如何调用方法详见 进阶用法 介绍

方法名	说明	传入参数
show	显示日历弹层，具体使用请查看 组件调用 介绍	-

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码