更新记录

1.0.9（2025-01-10） 下载此版本

无服务判断边界值值正

1.0.8（2025-01-10） 下载此版本

增加切换时间自动关闭弹窗配置

1.0.7（2025-01-08） 下载此版本

修复天数计算BUG

平台兼容性

uni-app

hbxw-timepicker预约时间选择组件

介绍

一个预约时间选择器组件，常用于如快递，按摩等上门服务时间预约选择

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view>
    <button @click="pickerTime(0)">预约时间0</button>
    <button @click="pickerTime(1)">预约时间1</button>
    <button @click="pickerTime(2)">预约时间2</button>
    <button @click="pickerTime(2)">预约时间3</button>
        <hbxw-timepicker v-model:isShow="showTimePicker0" :isBtn="false" @change="pickerChange"></hbxw-timepicker>
    <hbxw-timepicker v-model:isShow="showTimePicker1" :maxHour="16" :isBtn="false" @change="pickerChange"></hbxw-timepicker>
        <hbxw-timepicker v-model:isShow="showTimePicker2" :dayRange="7" :minHour="8" :maxHour="20" @change="pickerChange"></hbxw-timepicker>
        <hbxw-timepicker v-model:isShow="showTimePicker3" @change="pickerChange">
      <template #title="{title}">
        <view>{{title}}</view>
      </template>
      <template #btn="{result}">
        <button style="font-size: 24rpx;">{{result}}</button>
      </template>
    </hbxw-timepicker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showTimePicker0: false,
                showTimePicker1: false,
                showTimePicker2: false,
                showTimePicker3: false
            }
        },
        methods: {
            pickerTime(index) {
        this['showTimePicker'+index] = true;
      },
      pickerChange(result) {
        console.log('---- pickerChange ----:',  result);
      }
        }
    }
</script>

<style>

</style>

API

Props

Events