# tui-datetime 日期时间选择器
介绍
日期时间选择器,可设置默认显示,可根据需要调整选择的类型。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiDatetime from "@/components/thorui/tui-datetime/tui-datetime"
export default {
components:{
tuiDatetime
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# 微信小程序引入(可在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-年月日 时分秒 | 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 |
# Events
事件名 | 说明 | 回调参数 |
---|---|---|
confirm | 确定事件,返回选中日期时间数据 | 返回对应类型的日期时间信息 ,如:{year: Number,month: Number,result: String} |
cancel | 取消事件,取消选择 | {} |
# Methods
方法名 | 说明 | 传入参数 |
---|---|---|
show | 显示日期时间选择器,具体使用请查看 组件调用 介绍 | - |
# 预览
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |