更新记录

1.0.0(2019-12-27) 下载此版本

时间段选择组件创建


平台兼容性

uni-app 预订时间段选择

订餐,快递等等预订时间段的选择都可以使用该组件

主要功能:

  1. 自定义禁选时间
  2. 自定义选择时间范围
  3. 自定义时间间隔
  4. 自定义是否禁选过去时间
  5. 随时获取选择时间段

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>

隐私、权限声明

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

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

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

许可协议

MIT协议

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