更新记录
1.0.4(2024-05-17)
下载此版本
bug修复
1.0.3(2024-05-15)
下载此版本
暴露body插槽
1.0.2(2024-05-15)
下载此版本
标题调整
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
√ |
× |
× |
× |
× |
tf-picker-date-time
- 组件作用
- 集日期选择、日期范围选择、日期时间选择、日期时间范围选择为一体的日期时间选择组件
- 组件引用例子
<!-- 测试组件处 -->
<template>
<view class="content">
<TfPicker v-model="show" mode="range" :showTime="false" @confirm="confirm"/>
<u-button @click="show = true">打开</u-button>
</view>
</template>
<script>
import TfPicker from '../../uni_modules/tf-picker-date-time/components/tf-picker-date-time/tf-picker-date-time.vue'
export default {
components: {
TfPicker
},
data() {
return {
show:false
}
},
methods:{
confirm(e){
console.log(e)
}
}
}
</script>
<style scoped>
</style>
- 组件属性说明
属性名 |
类型 |
默认值 |
说明 |
value |
Boolean |
false |
控制组件显示与隐藏 |
mode |
String |
'single' |
切换单值/范围模式,'range':范围选择,'single':单值选择 |
showTime |
Boolean |
true |
是否显示时间 |
cancelColor |
String |
'#999999' |
取消按钮文字颜色 |
confirmColor |
String |
'#085699' |
确认按钮文字颜色 |
activeColor |
String |
'#085699' |
存在头部切换tab时,tab的激活颜色 |
defaultDateStart |
String |
'' |
开始日期默认值,不传或传空字符串时默认当天日期,格式'2024-05-04' |
defaultDateEnd |
String |
'' |
结束日期默认值,不传或传空字符串时默认当天日期,格式'2024-05-06' |
defaultTimeStart |
String |
'' |
开始时间默认值,不传或传空字符串时默认当前时间,格式'17:44:21' |
defaultTimeEnd |
String |
'' |
结束时间默认值,不传或传空字符串时默认当前时间,格式'17:44:24' |
showDateUnit |
Boolean |
false |
是否显示日期单位(年月日) |
showTimeUnit |
Boolean |
false |
是否显示时间单位(时分秒) |
minYear |
Number |
1990 |
可选的开始年份 |
maxYear |
Number |
1990 |
默认当前年月日 |
- 组件方法说明
事件名 |
说明 |
回调参数 |
confirm |
确认事件 |
- |
- 插槽说明
插槽名 |
说明 |
titleBottom |
自定义标题下tab内容 |
body |
自定义日期时间选择器部分内容 |
foot |
自定义底部按钮内容 |