更新记录

1.0.0（2025-12-25） 下载此版本

出版上线

平台兼容性

uni-app(3.6.15)

⏱️ selectPickerTime 时间区间选择组件说明

一个基于 Vue 3 + day.js 的时间区间选择组件，支持灵活的日期边界配置与默认区间策略，适用于订单筛选、统计分析、报表查询等场景。

📦 基础依赖 npm install dayjs

组件内部 统一使用 day.js 进行时间计算，无需额外处理闰年、月末等问题。

🚀 基础用法 <selectPickerTime :visable.sync="pickerTime" startText="开始日期" endText="结束日期" @pickerCancel="pickerTime = false" @confirm="onConfirm" />

📌 Props 说明 参数名 类型 必填 默认值 说明 visable boolean 是 false 控制弹窗显示 / 隐藏 startText string 否 '开始时间' 未选择开始时间时的占位文本 endText string 否 '结束时间' 未选择结束时间时的占位文本 minYear string 否 当前年前 3 年 可选最小时间边界 maxYear string 否 当前年后 3 年 可选最大时间边界 📅 minYear / maxYear 支持格式说明（重点）

minYear 和 maxYear 统一为字符串类型，支持以下 3 种格式：

1️⃣ 年（YYYY） minYear="2015" maxYear="2026"

等价于：

最小日期：2015-01-01 最大日期：2026-12-31

2️⃣ 年-月（YYYY-MM） minYear="2023-05" maxYear="2024-02"

等价于：

最小日期：2023-05-01 最大日期：2024-02-28（或 29）

📌 maxYear 会自动取 该月最后一天

3️⃣ 年-月-日（YYYY-MM-DD） minYear="2024-06-18" maxYear="2025-01-25"

等价于：

最小日期：2024-06-18 最大日期：2025-01-25

⛔ 超出范围的行为

默认选中时间 会自动被裁剪到合法范围内

点击确认时：

开始时间 > 结束时间 ❌

小于 minYear ❌

大于 maxYear ❌ → 会提示：时间范围不正确

🕒 默认选中规则（无需传值）

如果 未传 defaultDate：

开始时间：今天 结束时间：今天 + 1 个月

示例（假设今天是 2025-12-25）：

['2025-12-25', '2026-01-25']

📌 默认逻辑基于 dayjs().add(1, 'month')

📤 事件说明 @confirm

确认选择后触发，返回 标准格式的日期数组

onConfirm(value: string[]) { console.log(value) }

返回示例 ['2025-12-25', '2026-01-25']

始终为 YYYY-MM-DD

下标 0 → 开始日期

下标 1 → 结束日期

@pickerCancel

点击取消按钮时触发，一般用于关闭弹窗

@pickerCancel="pickerTime = false"

🧩 完整示例

✅ 组件特性总结

✔ 基于 Vue 3 + day.js

✔ 年 / 年月 / 年月日 边界自动解析

✔ 默认区间：今天 → 一个月后

✔ 自动处理闰年、月末

✔ 输出格式统一、稳定

✔ 适合生产环境直接使用