tui-datetime 日期时间选择器 开源组件

介绍

日期时间选择器，可设置默认显示，可根据需要调整选择的类型。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiDatetime from "@/components/thorui/tui-datetime/tui-datetime.vue"
export default {
	components:{
		tuiDatetime
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-datetime": "/components/thorui/tui-datetime/tui-datetime"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

设置选择类型

通过 type 属性设置设置选择类型，0（年） 1（年月日 时分） 2（年月日） 3（年月） 4（时分） 5（时分秒）6（分秒） 7（年月日 时分秒） 8 （年月日+小时）。

<!--uni-app-->
<tui-datetime :type="1"></tui-datetime>

<!--微信小程序-->
<tui-datetime type="{{1}}"></tui-datetime>

//完整使用请看下方【组件调用】示例

设置年份区间

通过 startYear 属性设置起始年份，endYear 属性设置结束年份。

<!--uni-app-->
<tui-datetime :startYear="2019" :endYear="2021"></tui-datetime>

<!--微信小程序-->
<tui-datetime startYear="{{2019}}" endYear="{{2021}}"></tui-datetime>

//完整使用请看下方【组件调用】示例

设置默认显示日期

通过 setDateTime 属性设置默认显示日期。

日期格式 ：2019-08-01 | 2019-08-01 17:01 | 2019/08/01

<tui-datetime setDateTime="2019-08-01 17:01"></tui-datetime>

//完整使用请看下方【组件调用】示例

组件调用

uni-app通过ref (opens new window) 来注册组件引用信息，微信小程序通过 this.selectComponent 获取子组件的实例对象。

组件中提供了 show 方法用来显示选择器。

<!--uni-app-->
<tui-datetime ref="dateTime" @confirm="change"></tui-datetime>

// data 数据 及 方法
export default {
  data() {
  	return {
  		result:'',
  	}
  },
  methods: {
  	//调用此方法显示选择器，需等组件初始化完成后调用，避免在onLoad中调用
  	show: function(e) {
  		this.$refs.dateTime && this.$refs.dateTime.show();
  	},
  	change: function(e) {
  		//选择的结果
  		console.log(e);
  		this.result = e.result;
  	}
  }
}

<!--微信小程序-->
<tui-datetime id="dateTime" bindconfirm="change"></tui-datetime>

// data 数据 及 方法
let dateTime;
Page({
  data: {
    result:'',
  },
  onReady: function (options) {
    dateTime = this.selectComponent("#dateTime")
  },
  show: function (e) {
    dateTime && dateTime.show();
  },
  change: function (e) {
  	//选择的结果
    console.log(e);
    this.setData({
      result: e.detail.result
    })
  }
})

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

Slots

插槽名称	插槽说明
-	-

Props

注意：支付宝小程序暂不支持动态切换type值。

属性名	类型	说明	默认值
type	Number	显示类型： 0-年份（年） 1-日期+时间（年月日+时分） 2-日期(年月日) 3-日期(年月) 4-时间（时分） 5-时分秒 6-分秒 7-年月日 时分秒 8-年月日+小时	1
startYear	Number	年份区间 开始年份	1980
endYear	Number	年份区间 结束年份	2050
hoursData V2.1.0+	Array	小时选择区间数据,如：[15,20]，如果设置则默认区间数据失效	[ ]
minutesData V2.1.0+	Array	分钟选择区间数据,如：[15,30,45]，如果设置则默认区间数据失效	[ ]
secondsData V2.1.0+	Array	秒数选择区间数据,如：[0,30]，如果设置则默认区间数据失效	[ ]
title V1.7.2+	String	显示标题	-
titleSize V1.7.2+	Number, String	标题字体大小	34
titleColor V1.7.2+	String	标题字体颜色	#333
cancelColor	String	"取消"字体颜色	#888
color	String	"确定"字体颜色	#5677fc
setDateTime	String	设置默认显示日期，格式如下： 2019-08-01 2019-08-01 17:01 2019/08/01	-
unitTop	Boolean	单位置顶	false
radius	Boolean	圆角设置	false
headerBackground	String	头部背景色	#fff
bodyBackground	String	选择器背景色，根据实际调整，不建议使用深颜色	#fff
unitBackground	String	单位置顶时，单位条背景色	#fff
height	Number,String	滚动区域高度，单位rpx	520
maskClosable	Boolean	点击遮罩是否可关闭，为true时触发cancel事件	true
zIndex V2.9.1+	Number,String	z-index值，注：原生导航栏或tabbar无法遮盖	998

Events

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

事件名	说明	回调参数
confirm	确定事件，返回选中日期时间数据	返回对应类型的日期时间信息 ，如：{year: Number,month: Number,result: String}
cancel	取消事件，取消选择	{}

Methods

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

方法名	说明	传入参数
show	显示日期时间选择器，具体使用请查看 组件调用 介绍	-

预览

特别说明

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

线上程序扫码预览

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