更新记录

1.0.5(2024-11-11) 下载此版本

去掉调试语句

1.0.4(2024-11-08) 下载此版本

优化第一次结束时间丢失的BUG

1.0.3(2024-11-06) 下载此版本

修复结束时间更新异常问题

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - -

hbxw-date-range-picker组件

介绍

一个可以自由定义选择级别的日期时间段选择器插件如: 2024-07-11 15:00:00 - 2030-07-12 16:18:56/2024-07-11 - 2030-07-12/2024-07-11 15:00 - 2030-07-12 16:18等

使用示例

使用前要以新建一个页面拷贝下面代码做一下测试,熟悉后再使用到项目中

复制代码
<template>
    <view class="content">
        <button @click="selctDateRange">选择日期时间段</button>
        <button @click="selctDateRange0">选择范围:年月日</button>
        <button @click="selctDateRange1">选择范围:年月日时分</button>
        <view class="text-area" v-if="date">
            <text class="date">values: {{JSON.stringify(date.values)}}</text>
            <text class="date">start: {{JSON.stringify(date.start)}}</text>
            <text class="date">end: {{JSON.stringify(date.end)}}</text>
            <text class="date">startStr: {{date.startStr}}</text>
            <text class="date">endStr: {{date.endStr}}</text>
            <text class="date">from: {{date.from}}</text>
        </view>
        <hbxw-date-range-picker
            title="选择时间"
            :visible="dateReangeVisible"
            @cancel="cancel"
            @sure="sure"
            @change="change"
         />
        <hbxw-date-range-picker
            title="选择时间"
            :visible="dateReangeVisible0"
      level="date"
            @cancel="cancel0"
            @sure="sure0"
            @change="change0"
         />
     <hbxw-date-range-picker
        title="选择时间"
        :visible="dateReangeVisible1"
      level="minute"
        @cancel="cancel1"
        @sure="sure1"
        @change="change1"
      />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dateReangeVisible: false,
                dateReangeVisible0: false,
                dateReangeVisible1: false,
                date: null
            }
        },
        onLoad() {

        },
        methods: {
            selctDateRange() {
                this.dateReangeVisible = true;
            },
            cancel() {
                console.log('---- cancel ----');
        this.dateReangeVisible = false;
            },
            sure(res) {
                console.log('---- sure ----:', res);
                this.date = res;
            },
            change(res) {
                console.log('---- change ----:', res);
                this.date = res;
            },

      selctDateRange0() {
        this.dateReangeVisible0 = true;
      },
      cancel0() {
        console.log('---- cancel ----');
        this.dateReangeVisible0 = false;
      },
      sure0(res) {
        console.log('---- sure ----:', res);
        this.date = res;
      },
      change0(res) {
        console.log('---- change ----:', res);
        this.date = res;
      },

      selctDateRange1() {
        this.dateReangeVisible1 = true;
      },
      cancel1() {
        console.log('---- cancel ----');
        this.dateReangeVisible1 = false;
      },
      sure1(res) {
        console.log('---- sure ----:', res);
        this.date = res;
      },
      change1(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 时间选择器的层级
yearSpan Number 10 时间选择器年份可以选到前后多少年前
level String time 时间选择器选择范围定义,date(年月日)/time(年月日时分秒)/year(选择年份)/month(年月)/day(年月日同date)/hour(年月日时)/minute(年月日时分)/second(年月日时分秒同time)

Events

事件名 说明 返回值
cancel 点击取消按钮的触发事件 undefined
sure 点击确认按钮的触发事件 举列:{values: [[10,6,11,9,52,19],[0,0,1,1,0,0]],start: ["2024","07","12","09","52","19"],end: ["2024","07","13","01","00","00"],startStr: 2024年07月12日 09:52:19,endStr: 2024年07月13日 01:00:00,from: sure}
change picker状态发生变化触发事件 举列:{values: [[10,6,11,9,52,19],[0,0,1,1,0,0]],start: ["2024","07","12","09","52","19"],end: ["2024","07","13","01","00","00"],startStr: 2024年07月12日 09:52:19,endStr: 2024年07月13日 01:00:00,from: start/end}

注意

显示的插件包体积有768kb,是包括了演示图片在里面的,真正使用的时候包体积是23KB左右

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议
sul***@163.com

2025-05-06

app为啥切换后滑动不了

hbxw 2025-05-06

切换是指?我没在APP下测过,只是小程序下自测过

旧时光

2025-03-26

希望日期直接的连字符支持自定义。就是支持‘年月日’、‘-’、空 3种方式

旧时光 2025-03-26

还有就是,源代码写的注释太少了,希望加点注释

hbxw 2025-04-03

返回的数据里有数组结构,可以自己拼接自己想要的格式

a_b***@163.com

2024-12-13

为什么我选择完结束时间后,再去选择开始时间,会同步修改结束时间呢

a_b***@163.com 2024-12-13

找到问题了。组件内有个开始时间有变化就重置结束时间。这个有没有方法控制开关啊。

hbxw 2024-12-13

因为在控制结束时间不能小于开始时间就得重置,也是最直接的保证结果正确的方法

hbxw 2024-12-13

放开的话,会导致选的时间范围不一定正确

634***@qq.com

2024-07-17

不错 挺好用的

hbxw 2024-07-17

谢谢,使用中有什么问题,欢迎留言

hbxw

2024-07-11

日期时间范围选择器组件封装,分享出来

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