更新记录
4.1.3(2023-07-20)
修复文件丢失
4.1.2(2023-06-28)
修复禁用时间段监听不及时问题
4.1.1(2023-06-25)
新增切换日期时,不清空时间段的选择
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
时间选择器
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>
属性说明
属性名 |
类型 |
默认值 |
备注 |
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](https://camo.githubusercontent.com/e0ec5358ffa0f18138201768dfdfc29563d10063c5494a5c53c2b5aeb500751a/68747470733a2f2f696d672d626c6f672e6373646e696d672e636e2f32303230303732303130323230353830362e706e67)