更新记录
1.0.3(2024-07-24) 下载此版本
新增配置isLimit,已过期时间不显示
1.0.2(2024-07-11) 下载此版本
解决初始未选择无法获取值的问题
1.0.1(2024-06-06) 下载此版本
去掉调试的log 完善说明
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | √ | - | - | - |
hbxw-datetime-range-picker组件
介绍
一个时间段选择器插件如: 2024-06-05 15:00-16:00/2024-06-05 15:00-17:00
使用示例
<template>
<view class="content">
<button @click="selctDateTimeRange">选择日期</button>
<button @click="selctDateTimeRange0">选择日期限制不小于当前时间</button>
<view class="text-area" v-if="date">
<text class="date">indexs:{{JSON.stringify(date.indexs)}}</text>
<text class="date">vals:{{JSON.stringify(date.vals)}}</text>
<text class="date">valsMore:{{JSON.stringify(date.valsMore)}}</text>
<text class="date">valStrs:{{JSON.stringify(date.valStrs)}}</text>
<text class="date">valStr:{{date.valStr}}</text>
</view>
<hbxw-datetime-range-picker
title="选择时间"
:visible="dateTimeReangeVisible"
@cancel="cancel"
@sure="sure"
@change="change"
/>
<hbxw-datetime-range-picker
title="选择时间"
:visible="dateTimeReangeVisible0"
:isLimit="true"
@cancel="cancel"
@sure="sure"
@change="change"
/>
</view>
</template>
<script>
export default {
data() {
return {
dateTimeReangeVisible: false,
dateTimeReangeVisible0: false,
date: null
}
},
onLoad() {
},
methods: {
selctDateTimeRange() {
this.dateTimeReangeVisible = true;
},
selctDateTimeRange0() {
this.dateTimeReangeVisible0 = true;
},
cancel() {
console.log('---- cancel ----');
this.dateTimeReangeVisible = false;
this.dateTimeReangeVisible0 = false;
},
sure(res) {
console.log('---- sure ----:', res);
this.date = res;
},
change(res) {
console.log('---- change ----:', res);
this.date = res;
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text-area {
display: flex;
flex-direction: column;
justify-content: center;
}
.date{
padding:20rpx 0;
border: 1px solid rgba(0,0,0,.2);
font-size: 28rpx;
}
</style>
API
Props
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
visible | Boolean | false | 是 | 时间段选择器的显示与隐藏 |
title | String | 选择时间 | 否 | 时间段选择器标题,如果不需要传空即可 |
zIndex | Number | 9999 | 否 | 时间选择器的层级 |
timeStep | Number | 1 | 否 | 时间选择器时间跨度 |
yearSpan | Number | 10 | 否 | 时间选择器年份可以选择范围,如今年是2024则可选择范围是2014-2034 |
isLimit | Boolean | false | 否 | 是否需要控制已过期时间不显示 |
Events
事件名 | 说明 | 返回值 |
---|---|---|
cancel | 点击取消按钮的触发事件 | undefined |
sure | 点击确认按钮的触发事件 | 举列:{indexs:[10, 5, 4, 15],vals:"2024-06-05 15:00-16:00",valsMore:["2024-06-05 15:00", "2024-06-05 16:00"],valStrs:["2024", "06", "05", "15:00-16:00"],valStr:["2024", "06", "05", "15:00", "16:00"]} |
change | picker状态发生变化触发事件 | 举列:{indexs:[10, 5, 4, 15],vals:"2024-06-05 15:00-16:00",valsMore:["2024-06-05 15:00", "2024-06-05 16:00"],valStrs:["2024", "06", "05", "15:00-16:00"],valStr:["2024", "06", "05", "15:00", "16:00"]} |