更新记录

1.0.0（2026-10-13） 下载此版本

• 首次发布
• 内置 7 个快捷项：今天、昨天、近一周、近一月、近三月、近半年、近一年，可通过 quick-ranges 配置显示 / 隐藏、修改文案、追加自定义天数；一个快捷项都不配置时，快捷区与「自定义」按钮整体隐藏，面板下方直接就是日期滚轮
• 「近一月 / 近三月 / 近半年 / 近一年」按自然月计算（如今天 10-13，近三月为 07-14 ~ 10-13）
• 自定义时在同一个面板中通过左右两组日期滚轮一次性选择开始与结束日期，分隔符固定居中
• 新增 theme-color 参数，可自定义「确定」按钮与选中快捷项（文字 + 浅色背景）的颜色
• 左右两组滚轮完全独立，拖动任意一侧都不会影响另一侧；若结束日期早于开始日期，点「确定」时弹窗提示且不提交，面板保留方便修改
• 修复：H5 端校验提示被选择面板遮挡的问题，提示弹窗改为组件内置实现，层级始终高于面板
• 新增 error-text 参数，用于自定义结束日期小于开始日期时的提示文案
• 自动保证开始日期不大于结束日期，自动处理大小月天数
• 支持 v-model 双向绑定、change/cancel/open 事件、默认插槽自定义触发器

平台兼容性

uni-app(3.8.5)

qw24-date-range 日期区间选择器

一个开箱即用的 uni-app 日期区间选择器：默认提供「今天 / 昨天 / 近一周 / 近一月 / 近三月 / 近半年 / 近一年」7 个快捷项（可配置显示哪些、隐藏、改文案、追加自定义天数），自定义时在同一个面板里用左右两组日期滚轮一次性选择开始与结束日期。

平台兼容性

最低版本要求：HBuilderX 3.6.0（vue2 / vue3 项目均可），组件本身只依赖 picker-view、插槽、计算属性等基础能力，无任何第三方依赖。

• HBuilderX 3.2.0+ 才支持 vue3 项目；
• HBuilderX 3.5.0+ 支持 pages_init.json，导入插件时会自动提示合并示例页路由，低于该版本需自己把示例页加到 pages.json；
• HBuilderX 4.71+ 使用新版平台兼容性规范（√ / x / -），插件市场的兼容性展示更准确，建议用 4.71+ 导入与发布；
• 该插件不支持 uni-app x（uvue），uni-app x 平台未声明支持。

安装

1. 在插件市场本插件详情页点击「使用 HBuilderX 导入插件」，选择你的项目；
2. 或把 qw24-date-range 目录直接复制到项目的 uni_modules 目录下；
3. 示例页面 uni_modules/qw24-date-range/pages/date-range/date-range.vue 可直接运行查看效果（首次导入时会提示合并页面路由）。

组件符合 easycom 规范，无需 import，直接使用标签 <qw24-date-range> 即可。

如果标签不渲染、点击没有反应，说明编译期没有扫描到这个 easycom 组件（新拷贝进项目的 uni_modules 目录需要重新扫描一次），此时：

• 停止运行后重新运行项目，或重启 HBuilderX 后再运行；
• 也可以显式引入组件（组件无法解析时的兜底方案）：

import QwDateRange from '@/uni_modules/qw24-date-range/components/qw24-date-range/qw24-date-range.vue';

export default {
    components: { QwDateRange }
};

<qw-date-range v-model="range" @change="handleChange" />

基本用法

<template>
    <view>
        <qw24-date-range v-model="range" @change="handleChange" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                range: { start: '2026-01-01', end: '2026-10-13' }
            };
        },
        methods: {
            handleChange(e) {
                // 点击「近一周」：e = { start: '2026-10-07', end: '2026-10-13', days: 7, quickIndex: 2, quickKey: 'week', quickLabel: '近一周' }
                console.log(e);
            }
        };
    };
</script>

v-model 的值为对象 { start, end }（也兼容 ['2026-01-01', '2026-10-13'] 数组）；vue2 项目同样使用 v-model，组件内部已兼容 value + input。

快捷区间

默认显示下面 7 项，顺序即展示顺序，结束日期都是今天：

另外还有一个内置可选项（不在默认列表里，需要时自己加上即可）：halfMonth —— 近半月，今天往前推 14 天。

通过 quick-ranges 控制显示哪些项、是否改文案、是否追加自定义天数：

<!-- 只显示近一周、近一月 -->
<qw24-date-range v-model="range" :quick-ranges="['week', 'month']" />

<!-- 改文案 / 隐藏某一项 / 追加自定义天数 -->
<qw24-date-range v-model="range" :quick-ranges="customRanges" />

<!-- 一个快捷项都不要，面板里直接就是日期滚轮选择 -->
<qw24-date-range v-model="range" :quick-ranges="[]" />

customRanges: [
    'today',
    { key: 'week', label: '近7天' },   // 改文案
    { key: 'month', visible: false },   // 隐藏「近一月」
    'quarter',
    { days: 10, label: '近10天' }       // 完全自定义天数
]

• 数组里写哪些项就显示哪些项，不写哪一项就是不显示哪一项；
• 当 quick-ranges 为空数组或不包含任何有效项时，整个快捷区都不显示，「自定义」按钮也一并隐藏，面板下方直接就是日期滚轮；
• 有快捷项时，「自定义」按钮会追加在最后（文案可用 custom-text 修改）。

属性

事件

方法

通过 ref 调用：

Slots

<qw24-date-range v-model="range">
    <view class="my-trigger">统计周期：{{ range ? range.start + ' ~ ' + range.end : '未选择' }}</view>
</qw24-date-range>

说明

• 主题色通过 theme-color 配置（默认 #2979ff），作用于「确定」按钮文字和选中的快捷项（文字 + 10% 透明度的同色背景），例如 theme-color="#ff6b35"、theme-color="#22c55e"；支持 #RRGGBB 与 #RGB，传其他颜色值时会直接用于文字色。
• 面板上半部分是快捷项（没有快捷项时整块隐藏），下半部分是左右两组滚轮：左边选开始日期，右边选结束日期，中间的分隔符固定居中。
• 左右两组滚轮完全独立，拖动任何一侧都不会影响另一侧，可以自由选择日期；大小月天数自动处理。
• 若结束日期早于开始日期，点「确定」时会弹出组件内置的提示弹窗（层级在面板之上，H5 端也不会被遮挡，文案可用 error-text 配置），面板不会关闭、不会提交，方便直接在滚轮上修改。
• 若当前 v-model 的值不匹配任何快捷项，打开面板时会高亮「自定义」。
• 组件不依赖任何第三方插件，样式可自行覆盖（类名前缀统一为 drp-）。