更新记录

0.0.1(2022-12-02)

vue2版本升级为veu3


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

时间选择器

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

使用方法

在 template 中使用

<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>

属性说明

属性名 类型 默认值 备注
isSection Boolean false 是否选择时间段(将isMultiple置为false)
isMultiple Boolean false 是否多选
disableText String 已约满 禁用显示的文本
undisableText String 可预约 未禁用显示的文本
timeInterval Number 1 时间间隔,小时为单位
selectedTabColor String #FB4B5C 日期栏选中的字体颜色
appointTime Array '2020-12-05 17:00:00' 被预约的具体时间
beginTime String 开始时间 '09:00:00'
endTime String 结束时间 '19:00:00'
disableTimeSlot Array [] 禁用时间段,格式是[ [begin_time: "2021-11-17 11:00:00",end_time: "2021-11-17 16:00:00"] ]
isQuantum Boolean false 选择两个时间点为一个时间段,效果可以运行案例

说明

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

穿搭style小程序logo

隐私、权限声明

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

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

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

许可协议

MIT协议

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