更新记录

1.0.1（2025-11-18） 下载此版本

增加高度配置

1.0.0（2025-10-29） 下载此版本

初始功能

平台兼容性

uni-app(4.66)

liaction-timepicker

组件介绍

liaction-timepicker 是一个功能丰富的时间选择器组件，支持时间段选择和单时间点选择两种模式，提供预设时间段快速选择功能，适用于各种需要时间选择的场景。

组件特点

• 支持时间段选择和单时间点选择两种模式
• 提供预设时间段快速选择功能
• 可自定义预设时间段内容
• 支持设置时间间隔
• 自动处理时间范围有效性检查
• 高度可定制的样式和文本内容

依赖说明

• 本组件依赖 uni-popup 弹出层组件
• uni-popup 组件地址：https://ext.dcloud.net.cn/plugin?id=329
• 使用前请确保已安装并正确引入 uni-popup 组件

使用示例

基本使用 - 时间段选择模式

<template>
  <view>
    <liaction-timepicker
      title="选择时间范围"
      :value="['08:00', '12:00']" <!-- 数组格式，[开始时间, 结束时间] -->
      @confirm="angeConfirm"
      @cancel="onPickerCancel"
    ></liaction-timepicker>
  </view>
</template>

<script>
export default {
  methods: {
    angeConfirm(e) {
      console.log('选择的时间范围:', e.startTime, '~', e.endTime);
      // 如果选择了预设时间段，还可以获取预设key
      if (e.preset) {
        console.log('选择的预设时间段:', e.preset);
      }
    },
    onPickerCancel() {
      console.log('取消选择');
    }
  }
}
</script>

单时间点选择模式 - 字符串格式

<template>
  <view>
    <liaction-timepicker
      title="选择时间"
      :enableTimeRange="false"
      :value="'14:30'" <!-- 字符串格式 -->
      @confirm="onTimeConfirm"
      @cancel="onPickerCancel"
    ></liaction-timepicker>
  </view>
</template>

<script>
export default {
  methods: {
    onTimeConfirm(e) {
      // 单时间点模式下，时间通过 e.time 获取
      console.log('选择的时间:', e.time);
    },
    onPickerCancel() {
      console.log('取消选择');
    }
  }
}
</script>

单时间点选择模式 - 数组格式

<template>
  <view>
    <liaction-timepicker
      title="选择时间"
      :enableTimeRange="false"
      :value="['14:30']" <!-- 数组格式，仅包含一个时间值 -->
      @confirm="onTimeConfirm"
      @cancel="onPickerCancel"
    ></liaction-timepicker>
  </view>
</template>

<script>
export default {
  methods: {
    onTimeConfirm(e) {
      console.log('选择的时间:', e.time);
    },
    onPickerCancel() {
      console.log('取消选择');
    }
  }
}
</script>

自定义预设时间段

<template>
  <view>
    <liaction-timepicker
      title="选择时间范围"
      :customPresets="customPresets"
      @confirm="angeConfirm"
    ></liaction-timepicker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      customPresets: [
        { key: 'morning', label: '上午', start: '08:00', end: '12:00' },
        { key: 'afternoon', label: '下午', start: '14:00', end: '18:00' },
        { key: 'evening', label: '晚上', start: '18:00', end: '22:00' }
      ]
    }
  },
  methods: {
    angeConfirm(e) {
      console.log('选择的时间范围:', e.startTime, '~', e.endTime);
    }
  }
}
</script>

响应式绑定示例

<template>
  <view>
    <liaction-timepicker
      title="选择时间范围"
      :value="[selectedStartTime, selectedEndTime]"
      @confirm="angeConfirm"
    ></liaction-timepicker>
    <view class="selected-time">
      已选择: {{ selectedStartTime }} - {{ selectedEndTime }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedStartTime: '09:00',
      selectedEndTime: '17:00'
    }
  },
  methods: {
    angeConfirm(e) {
      this.selectedStartTime = e.startTime;
      this.selectedEndTime = e.endTime;
      console.log('更新后的时间范围:', e.startTime, '~', e.endTime);
    }
  }
}
</script>

属性说明

事件说明

方法说明

注意事项

1. 单时间点模式下，确认事件返回的是e.time，而不是e.startTime
2. 时间段模式下，开始时间不应大于结束时间，组件会自动处理这种情况
3. 自定义预设时间段时，需要保证数据格式正确：[{ key: String, label: String, start: String, end: String }]
4. 为了获得最佳体验，建议在移动设备上使用