Cube-UI 时间选择器 TimePicker 组件深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00948/article/details/148419207

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 是 Cube-UI 提供的一个功能强大的时间选择组件，它可以帮助开发者快速实现移动端的时间选择功能。该组件支持多种配置选项，能够满足不同场景下的时间选择需求。

核心功能特性

灵活的时间选择：支持选择未来几天内的时间点
自定义步长：可设置分钟数的步长（如每10分钟一个选项）
时间范围限制：支持设置最小和最大可选时间
格式化输出：可自定义选择时间的显示格式
多语言支持：日期文案可自定义

基础使用教程

1. 基本用法示例

<template>
  <cube-button @click="showTimePicker">选择时间</cube-button>
</template>

<script>
export default {
  methods: {
    showTimePicker() {
      this.$createTimePicker({
        showNow: true,
        minuteStep: 5,
        delay: 15,
        onSelect: (selectedTime, selectedText, formatedTime) => {
          console.log('选择的时间戳:', selectedTime)
          console.log('显示的文本:', selectedText)
          console.log('格式化时间:', formatedTime)
        },
        onCancel: () => {
          console.log('用户取消了选择')
        }
      }).show()
    }
  }
}
</script>

参数说明：

showNow: 是否显示"现在"选项
minuteStep: 分钟间隔（这里设置为5分钟）
delay: 最小可选时间与当前时间的分钟差（这里设置为15分钟后）

2. 日期选项配置

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

日期配置详解：

len: 控制显示的日期数量
filter: 自定义特定日期的显示文本
format: 日期格式化字符串

高级功能详解

1. 时间格式化输出

从1.10.0版本开始，支持自定义选择时间的输出格式：

this.$createTimePicker({
  format: 'hh:mm',  // 只显示小时和分钟
  // 其他配置...
})

2. 分钟步长高级配置

1.10.5+版本支持更精细的分钟步长控制：

this.$createTimePicker({
  minuteStep: {
    rule: 'ceil',  // 取整规则：向上取整
    step: 15       // 15分钟一个间隔
  },
  // 其他配置...
})

取整规则选项：

floor: 向下取整
ceil: 向上取整
round: 四舍五入

3. 时间范围限制

1.12.6+版本支持设置最小和最大可选时间：

// 设置最小可选时间（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
})

组件API详解

Props配置项

| 配置项 | 类型 | 说明 | 默认值 | |-------|------|------|-------| | day | Object | 日期配置 | { len: 3, filter: ['今日'], format: 'M月D日' } | | minuteStep | Number/Object | 分钟步长 | 10 | | delay | Number | 最小可选时间与当前的分钟差 | 15 | | min | Date/Number | 最小可选时间 | null | | max | Date/Number | 最大可选时间 | null | | format | String | 时间格式化字符串 | 'YYYY/M/D hh:mm' |