更新记录
1.0.0(2019-12-27) 下载此版本
时间段选择组件创建
平台兼容性
uni-app 预订时间段选择
订餐,快递等等预订时间段的选择都可以使用该组件
主要功能:
- 自定义禁选时间
- 自定义选择时间范围
- 自定义时间间隔
- 自定义是否禁选过去时间
- 随时获取选择时间段
s-select-time自定义属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
currentTime | String | 2019-12-27 08:30 | 当前时间(只有isDisabledTime为true时才有用) |
currentDate | String | 2019-12-27 | 当前日期(或者某一天) |
isDisabled | Boolean | true | 是否禁选过去时间 |
startTime | String | 07:00 | 开始时间 |
endTime | String | 20:00 | 截止时间 |
interval | Number | 30 | 时间间隔,取值范围1——60分钟(整数) |
disabledTime | Array | [] | 不可选时间,值举例[{start: '09:30' , end: '10:00'}] |
可触发事件
事件名称 | 说明 |
---|---|
selectedTime | 获取所选时间 |
使用示例
<template>
<view class="container">
<s-select-time :isDisabled="true"
currentTime="2020-01-01 10:45"
currentDate="2020-01-01"
startTime="9:00"
:disabledTime="disabledTime"
endTime="21:00"
:interval="30"
@selectedTime="selectedTime"></s-select-time>
</view>
</template>
<script>
import SSelectTime from '@/components/s-select-time/s-select-time.vue'
export default {
components: {
SSelectTime
},
data () {
return {
disabledTime: [
{
start: '11:00',
end: '12:00'
}
]
}
},
methods: {
selectedTime (e) {
console.log(e)
}
}
}
</script>
<style lang="scss" scoped>
</style>