更新记录

1.0.0（2026-04-14） 下载此版本

• 首次发布：多端时间范围选择器（H5/微信小程序/App）
• 支持开始/结束时间联动校验，避免非法时间区间
• 支持分钟边界裁剪（首小时/末小时）
• 支持默认时间自动计算（当前时间 + futureMinutes）
• 兼容 24:00 输入并归一化为 23:59
• 暴露 open/close 方法，便于业务页面调用
• 依赖 uni-popup（uni-ui）

平台兼容性

uni-app(5.0)

uni-app 多端时间范围选择器（Time Range Picker）

一套代码，多端复用。适用于 H5 / 微信小程序 / App（iOS/Android） 的时间范围选择组件。

插件依赖

本插件依赖 uni-popup（uni-ui）。
请先确保项目中可正常使用 uni-popup 组件。

组件特点

• 多端可用：H5、微信小程序、App
• 开始/结束时间联动校验，避免非法区间
• 分钟范围智能裁剪（首小时、末小时）
• 支持默认时间自动计算（当前时间 + futureMinutes）
• 兼容 24:00 输入（自动归一化为 23:59）
• 暴露 open / close 方法，便于业务调用

适用场景

• 预约时间段选择
• 营业时间设置
• 筛选条件时间区间
• 任务执行时间配置

安装方法

1. 在 uni-app 插件市场中搜索并导入 time-range-section
2. 首次导入可能需要重新编译

快速开始

<template>
  <view class="page">
    <button type="primary" @click="openPicker">选择时间范围</button>
    <view style="margin-top: 20rpx;">当前选择：{{ timeText }}</view>

    <time-range-section
      ref="timeRangeRef"
      title="选择时间范围"
      start-label="开始时间"
      end-label="结束时间"
      start-time="00:00"
      end-time="23:59"
      :future-minutes="30"
      @timeRange="timeRange"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const timeRangeRef = ref(null)
const timeText = ref('未选择')

const openPicker = () => {
  timeRangeRef.value?.open()
}

const timeRange = ([start, end]) => {
  timeText.value = `${start} - ${end}`
}
</script>

Props

Events

timeRange

确认选择后触发。

回调参数：

[startTime, endTime]

示例：

const ange = ([start, end]) => {
  console.log(start, end) // 例如：'09:30', '11:00'
}

Expose 方法

通过 ref 可调用以下方法：

• open()：打开弹窗
• close()：关闭弹窗

示例：

timeRangeRef.value?.open()
timeRangeRef.value?.close()

使用说明与规则

1. 组件会对输入时间进行边界处理：
   • 若 startTime > endTime，会自动修正到合法区间。
2. 若传入 24:00，组件内部按 23:59 处理。
3. 当开始时间大于结束时间时，会自动联动修正，保证区间合法。
4. 只有点击“确认”才会触发 timeRange 事件。

常见问题

1）为什么组件无法弹出？

请确认：

• 页面中已正确引入组件；
• 通过 ref 调用了 open()；
• 项目中 uni-popup 可正常使用。

2）为什么默认时间和我传入的不一致？

组件会自动将默认时间裁剪到 [startTime, endTime] 合法区间内。
如果默认结束时间早于默认开始时间，也会自动修正。

3）是否支持跨端？

支持。已按 uni-app 组件方式实现，可用于 H5、微信小程序、App（iOS/Android）。

更新日志（示例）

1.0.0

• 首次发布
• 支持时间范围双列选择
• 支持开始结束联动限制
• 支持分钟边界裁剪与默认时间偏移
• 支持多端使用（H5/微信小程序/App）

版权说明

• 免费版默认 MIT（如插件包根目录存在 license.md，以该文件为准）。
• 若用于商业项目，请遵守插件市场相关协议。