tui-datetime 日期时间选择器

介绍

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

引入

uni-app引入

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

import tuiDatetime from "@/components/thorui/tui-datetime/tui-datetime"
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 属性设置设置选择类型，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>

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

//uni-app 方法调用
show: function(e) {
	this.$refs.dateTime.show();
},
change: function(e) {
	//选择的结果
	console.log(e);
	this.result = e.result;
}


//微信小程序 方法调用
let dateTime;
Page({
  onReady: function (options) {
    dateTime = this.selectComponent("#dateTime")
  },
  show: function (e) {
    dateTime.show();
  },
  change: function (e) {
	//选择的结果
    console.log(e);
    this.setData({
      result: e.detail.result
    })
  }
})

Slots

none

Props

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

参数	类型	说明	默认值
type	Number	显示类型： 1-日期+时间（年月日+时分） 2-日期(年月日) 3-日期(年月) 4-时间（时分） 5-时分秒 6-分秒 7-年月日 时分秒 8-年月日+小时	1
startYear	Number	年份区间 开始年份	1980
endYear	Number	年份区间 结束年份	2050
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

Events

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

Methods

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

预览

线上程序扫码预览

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