更新记录

4.1.3（2023-07-20） 下载此版本

修复文件丢失

4.1.2（2023-06-28） 下载此版本

修复禁用时间段监听不及时问题

4.1.1（2023-06-25） 下载此版本

新增切换日期时，不清空时间段的选择

平台兼容性

uni-app

其他

时间选择器

APP、H5、微信小程序都可以使用，其他可自行测试

使用方法

在 template 中使用

Vue3版本升级

预约时间选择器-vue3

<template>

    <!-- 预约时间段的写法 -->
    <times @change="getTime" :isMultiple="true" :timeInterval="1" :isQuantum="true" :disableTimeSlot="disableTimeSlot">
    </times>
    <!-- 多选时间的配置 -->
    <!-- <times @change="getTime" :timeInterval="1" :appointTime="appointTime"
        :isMultiple="true" :disableTimeSlot = "disableTimeSlot"></times> -->

    <!-- 单选的配置 -->
    <!--    <times @change="getTime" :timeInterval="1" :appointTime="appointTime"
        :isMultiple="false" :disableTimeSlot = "disableTimeSlot"></times> -->

    <!-- 预约时间段 -->
    <!-- <times @change="getTime" :timeInterval="1" :appointTime="appointTime"
        :isSection="true" :disableTimeSlot = "disableTimeSlot"></times> -->

</template>

在 script 中使用

<script setup lang="ts">
    import times from '@/components/pretty-times/pretty-times.vue'

    const appointTime = ["2022-02-10 15:30:00"]
    const disableTimeSlot = [
        ["2022-10-17 09:00:00", "2022-10-17 10:00:00"],
        ["2022-05-05 16:30:00", "2022-05-05 18:30:00"]
    ]

    const getTime = (time:any) => {
        console.log(time, '时间')
    }
</script>

属性说明

说明

推荐新手可以拿去练手的一个开源小程序 穿搭Style小程序