更新记录

1.0.2（2024-07-11）

完善说明文挡

1.0.1（2024-07-11）

新增level参数，可以定义选择器选择级别

1.0.0（2024-07-11）

新增

平台兼容性

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

Events

注意

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