更新记录

1.0.1(2023-07-04) 下载此版本

增加flex样式

1.0.0(2023-06-08) 下载此版本

初始版本


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.1 app-nvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

时间范围选择插件

插件说明

这是一个时间(时-分)范围选择插件,第一个时间不能大于第二个时间,第二个时间不能小于第一个时间。

在做某些时间范围项目的时候会用到,例如课程安排表,时间计划表等之类的需求。

我做的时候发现插件市场没有一个符合我的需求,于是就自己做了一个,分享给须要的朋友。

具体效果可以扫码看,在添加计划部分有呈现

有使用上的问题可加我微信tcourse或留言

重要说明

插件依赖uni-popup插件!!!

插件依赖uni-popup插件!!!

插件依赖uni-popup插件!!!

具体使用

复制代码<template>
    <view>
        <view @tap="show">显示时间范围</view>
        <tpf-time-range
        ref="time" 
        :startTime="startTime" 
        :startDefaultTime="startDefaultTime"
        :endTime="endTime"
        :endDefaultTime="endDefaultTime"
        @timeRange="timeRange"
        >
        </tpf-time-range>
    </view>
</template>

<script>
export default {
    data(){
        return {
            startTime:"00:00",
            startDefaultTime:"06:00",
            endTime:"24:00",
            endDefaultTime:"06:00",
        }
    },
    onLoad() {

    },
    methods:{
        show(){
            this.$refs['time'].open();
        },
        timeRange(e){
            console.log(e);
        }
    }
}
</script>

属性说明

名称 类型 默认值 描述
startTime string 00:00 定义开始时间
startDefaultTime string startTime 定义开始默认时间
endTime string 23:59 定义结束时间
endDefaultTime string endTime 定义结束默认时间

事件说明

事件名 说明 返回值
@timeRange 结果值回调 Array

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议
had***@163.com

2025-03-17

277***@qq.com

2024-12-16

1、插件默认就显示出来了 2、 点击取消、确定报 Cannot read property 'close' of undefined

jes***@qq.com

2024-11-15

1.点击取消按钮,值也被 emit 回来了。。。需要区分 sure 和 cancel 2.传默认值进来,会报错 Invalid prop: custom validator check failed for prop "startDefaultTime". Invalid prop: custom validator check failed for prop "endDefaultTime". 未找到什么原因,暂时不传默认值;

331***@qq.com

2024-07-17

底部没有合起来

331***@qq.com 2024-07-17

看错了,真机没问题

tpframe2020 2024-07-17

不明白你说的没有合起来是什么意思,一定要在页面加载完再去调用哦

297***@qq.com

2023-10-08

你好 设置默认时间无效 显示的都是00:00

297***@qq.com 2023-10-08

uniapp编译的微信小程序

tpframe2020 2023-10-08

具体我也不知道你的什么情况,你用案例代码测试有没有你说的这个问题?

297***@qq.com 2023-10-08

已解决 可能是最新的picker-view的问题 在picker-view加一个if判断 等createTimeRange有值在显示就正常了

297***@qq.com 2023-10-08

案例测试代码也是有这个问题的

tpframe2020 2023-10-08

可能是官方有变动,后续我再完善完善。

查看更多
110***@qq.com

2023-09-06

乔乔不想上班

2023-07-28

取消和确认走的一个方法吗?我取消不了啊,close()报错

tpframe2020 2023-09-06

源码都在这,看看就明白了,不难的。

xxu***@gmail.com

2023-07-04

你用到的很多flex的类名是自己写的还是哪个库里的?

tpframe2020 2023-07-04

新补充了flex样式,重新下载

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问