更新记录

1.0.0（2024-08-30） 下载此版本

初次发布

平台兼容性

cc-timedate组件使用说明

示例代码

<template>
  <view>
    <view @click="openTimedate">显示时间 {{ time }}</view>
    <cc-timedate
      ref="timedate"
      :step="1"
      :startHourLimit="[3, 6]"
      :endHourLimit="[3, 10]"
      :startMinuteLimit="[2, 6]"
      :endMinuteLimit="[20, 23]"
      @confirm="confirm"
    />
  </view>
</template>

export default {
    data() {
        return {
            time: null
        }
    },
    methods: {
        openTimedate() {
            this.$refs.timedate.open()
        },
        confirm(data) {
            console.log(data);
            this.time = data
        }
    }
}

组件属性

属性说明

• step：可选时间的步长（分钟）
  • 例如值设为10，则可选的分钟就只有 10,20,30,40,50，设置为15就只有15,30,45
• startHourLimit：开始的小时时间范围
  • 例如示例代码中配置为：[3, 6]，则可选的开始小时则只能选择3点-6点
• endHourLimit：结束的小时时间范围
  • 例如示例代码中配置为：[3, 10]，则可选的结束小时则只能选择3点-10点
• startMinuteLimit：开始的分钟时间范围
  • 例如示例代码中配置为：[2, 6]，则可选的开始分钟则只能选择2分-6分
• endMinuteLimit：开始的分钟时间范围
  • 例如示例代码中配置为：[20, 23]，则可选的结束分钟则只能选择20分-23分
• @confirm：
  • 回调中返回选择的时间格式为 Array，如：['05:03', '08:20']

其他说明

1. 代码中写了开始时间不得晚于结束时间，如开始时间选择了 02:00，结束时间选择了 02:01，组件会toast提示，并且不调用 confirm 事件，如果不需要可以在组件代码的第95-104行注释掉
2. 组件中的 picker-view 组件使用了@pickstart和@pickend，因为实测中发现，不加这俩方法，在滑动过程中点击确定。confirm方法会返回 undefind。不知道为啥。。
3. 如果小时设置了24点时，滑动到24时，分钟只能选择 00 。代码在组件中的145行开始
4. 其他：自己看代码吧。不是很复杂...
5. 工作中输出的组件。实际项目中使用时比单独使用复杂，涉及到多段时间选择，时间要覆盖00:00-24:00，时间段不能重复，例如第一段时间选择 00:00-08:30（开始时间00:00不可修改），第二段时间选择08:30-16:00（第二段时间开始时间必须从08:30 开始）,第...段时间xx:xx-xx:xx（中间的时间段开始时间必须为上一段的结束时间），最后一段时间16:00-24:00（结束时间24:00不可修改），如果只有一段时间，则时间设置为 00:00-24:00，且不可修改
6. 第五点的时间段代码有点复杂，如果有需要的可以留言。我找时间剥离出来。传上来