# 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(年月日 时分秒)。

<!--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 Number 显示类型:
1-日期+时间(年月日+时分)
2-日期(年月日)
3-日期(年月)
4-时间(时分)
5-时分秒
6-分秒
7-年月日 时分秒
8-年月日+小时
1
startYear Number 年份区间 开始年份 1980
endYear Number 年份区间 结束年份 2050
cancelColor String "取消"字体颜色 200
color String "确定"字体颜色 200
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

# Events

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

# Methods

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

# 预览

# 线上程序扫码预览

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