ThorUI文档

# 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示例小程序码

← tui-clipboard 复制到剪贴板 →