Cube-UI 时间选择器 TimePicker 组件详解

班岑航Harris

于 2025-06-04 09:19:51 发布

阅读量356

点赞数 3

本文链接：https://blog.csdn.net/gitblog_01160/article/details/148419177

版权

Cube-UI 时间选择器 TimePicker 组件详解

cube-ui :large_orange_diamond: A fantastic mobile ui lib implement by Vue 项目地址: https://gitcode.com/gh_mirrors/cu/cube-ui

什么是 TimePicker 组件

TimePicker 是 Cube-UI 提供的一个功能强大的时间选择器组件，它可以帮助开发者快速实现移动端的时间选择功能。这个组件采用三列滚轮式设计，分别用于选择日期、小时和分钟，操作直观便捷。

基础用法

要使用 TimePicker 组件，首先需要在项目中引入并注册 Cube-UI。基础用法非常简单：

<cube-button @click="showTimePicker">打开时间选择器</cube-button>

export default {
  methods: {
    showTimePicker() {
      this.$createTimePicker({
        showNow: true,
        minuteStep: 5,
        delay: 15,
        onSelect: (selectedTime, selectedText, formatedTime) => {
          // 处理选择结果
        },
        onCancel: () => {
          // 处理取消操作
        }
      }).show()
    }
  }
}

在这个基础示例中，我们配置了几个关键属性：

showNow: 是否显示"现在"选项
minuteStep: 分钟步长，这里设置为5分钟
delay: 从当前时间往后延迟的分钟数，影响可选的最小时间

高级配置

日期选项配置

TimePicker 允许对日期列进行详细配置：

this.$createTimePicker({
  day: {
    len: 5,  // 显示5天的选项
    filter: ['今天', '明天'],  // 自定义前两天的显示文本
    format: 'M月d日'  // 日期格式化
  }
})

时间格式配置

从1.10.0版本开始，支持自定义时间格式：

this.$createTimePicker({
  format: 'hh:mm',  // 只显示小时和分钟
  onSelect: (selectedTime, selectedText, formatedTime) => {
    // formatedTime 将按照指定格式显示
  }
})

时间范围限制

1.12.6版本新增了min和max属性，可以限制可选时间范围：

// 设置最小可选时间（2小时20分钟前）
this.$createTimePicker({
  min: +new Date() - (2 * 60 + 20) * 60 * 1000
})

// 设置最大可选时间（2天2小时20分钟后）
this.$createTimePicker({
  max: +new Date() + ((2 * 24 + 2) * 60 + 20) * 60 * 1000
})

手动设置时间

可以通过实例方法动态设置显示的时间：

const timePicker = this.$createTimePicker({...})
// 设置为1小时后
timePicker.setTime(new Date().valueOf() + 1 * 60 * 60 * 1000)
timePicker.show()

属性详解

TimePicker 提供了丰富的配置属性：

| 属性 | 说明 | 类型 | 默认值 | |------|------|------|------| | day | 日期配置 | Object | { len: 3, filter: ['今日'], format: 'M月D日' } | | showNow | 是否显示"现在"选项 | Boolean/Object | true | | minuteStep | 分钟步长 | Number | 10 | | delay | 从当前时间延迟的分钟数 | Number | 15 | | min | 最小可选时间 | Date/Number | null | | max | 最大可选时间 | Date/Number | null | | title | 标题 | String | '选择时间' | | format | 时间格式化字符串 | String | 'YYYY/M/D hh:mm' |