更新记录

1.0.8（2024-11-19） 下载此版本

去掉代码断点

1.0.7（2024-11-19） 下载此版本

修复返回结果和界面结果不一致问题

1.0.6（2024-09-25） 下载此版本

增加遮罩和入场动画配置

平台兼容性

hbxw-time-range-picker组件

介绍

一个时间段选择器插件如: 15:00:00-16:00:00 / 15时00分00秒-16时00分00秒 / 15:00-16:00 / 15时00分-16时00分

使用示例

<template>
    <view>
        <view>{{result}}</view>
        <button class="button-item" @click="pickerAction0">中文单位的时分秒时间段选择器</button>
        <button class="button-item" @click="pickerAction1">冒号分隔的时分秒时间段选择器</button>
        <button class="button-item" @click="pickerAction2">冒号分隔的时分时间段选择器</button>
        <button class="button-item" @click="pickerAction3">冒号分隔的限制起始和结束的时分秒时间段选择器</button>
        <hbxw-time-range-picker 
            :value="values0" 
            :visible="showPicker0" 
            @change="pickerChange0"
            @cancel="pickerCancel0"
            @sure="pickerSure0"
        />
        <hbxw-time-range-picker 
            :value="values1" 
            :visible="showPicker1"
            :isShowType="false"
            delimiter="point"
            @change="pickerChange1"
            @cancel="pickerCancel1"
            @sure="pickerSure1"
        />
        <hbxw-time-range-picker 
            :value="values2" 
            :visible="showPicker2"
            :isShowType="false"
            delimiter="point"
            :isShowSecond="false"
            @change="pickerChange2"
            @cancel="pickerCancel2"
            @sure="pickerSure2"
        />
        <hbxw-time-range-picker 
            :value="values3" 
            :visible="showPicker3"
            :isShowType="false"
            delimiter="point"
            limitStart="08:08:08"
            limitEnd="22:22:22"
            @change="pickerChange3"
            @cancel="pickerCancel3"
            @sure="pickerSure3"
        />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showPicker0: false,
                showPicker1: false,
                showPicker2: false,
                showPicker3: false,
                result: null,
                values0: '01时01分01秒-01时01分02秒',
                values1: '08:06:09-08:09:09',
                values2: '08:06-08:09',
                values3: ''
            }
        },
        methods: {
            pickerAction0() {
                this.showPicker0 = true;
            },
            pickerCancel0() {
                this.showPicker0 = false;
            },
            pickerSure0(result) {
                console.log('---- pickerSure0 ----:', result);
                this.result = result;
                this.showPicker0 = false;
            },
            pickerAction1() {
                this.showPicker1 = true;
            },
            pickerCancel1() {
                this.showPicker1 = false;
            },
            pickerSure1(result) {
                console.log('---- pickerSure1 ----:', result);
                this.result = result;
                this.showPicker1 = false;
            },
            pickerAction2() {
                this.showPicker2 = true;
            },
            pickerCancel2() {
                this.showPicker2 = false;
            },
            pickerSure2(result) {
                console.log('---- pickerSure2 ----:', result);
                this.result = result;
                this.showPicker2 = false;
            },
            pickerAction3() {
                this.showPicker3 = true;
            },
            pickerCancel3() {
                this.showPicker3 = false;
            },
            pickerSure3(result) {
                console.log('---- pickerSure3 ----:', result);
                this.result = result;
                this.showPicker3 = false;
            },
            pickerChange0(result) {
                console.log('---- pickerChange0 ----:', result);
                this.result = result;
            },
            pickerChange1(result) {
                console.log('---- pickerChange1 ----:', result);
                this.result = result;
            },
            pickerChange2(result) {
                console.log('---- pickerChange2 ----:', result);
                this.result = result;
            },
            pickerChange3(result) {
                console.log('---- pickerChange3 ----:', result);
                this.result = result;
            }
        }
    }
</script>

<style lang="scss" scoped>
.button-item{
    margin-bottom: 20rpx;
    font-size: 26rpx;
}
</style>

API

Props

Events