更新记录

1.0.0（2026-09-23） 下载此版本

• 首个版本
• 年 / 月 / 日滚轮三级联动，支持 date、month、year 三种模式
• 内置「此刻」快捷选择，支持自定义第二个快捷按钮（长期有效 / 至今等）
• 支持一键清除、占位文案自定义
• v-model 双向绑定，Vue2 / Vue3 双兼容
• 无缝接入 uni-forms 表单
• date 模式可通过 withTime 控制输出值是否携带当前时间

平台兼容性

uni-app(3.8.4)

uni-app x(3.8.4)

其他

Rui-datePickerPlus 增强型日期选择器

基于 picker-view 滚轮的增强型日期选择组件：输入框 + 底部弹窗交互，开箱即用。

功能特性

• 年 / 月 / 日滚轮三级联动，自动处理每月天数（含闰年）
• 三种模式：date（年月日）、month（年月）、year（年）
• 内置「此刻」快捷按钮，一键选中今天
• 可选第二个快捷按钮，文案与对应日期均可自定义：「长期」「至今」「无固定期限」「终身」「永久有效」等有效期场景一行配置
• 支持一键清除（可关闭）
• 内嵌 uni-easyinput 输入框，日历图标前缀，聚焦即弹窗
• 无缝接入 uni-forms 表单，也可独立使用
• v-model 双向绑定，Vue2、Vue3 项目均可直接使用，无需任何适配
• 初始值回显兼容：支持 2026、2026-09、2026-09-23、2026-09-23 14:30:00 等多种格式

安装

在插件市场点击「使用 HBuilderX 导入插件」即可。依赖的 uni-easyinput、uni-popup、uni-forms 会由 HBuilderX 自动安装。

组件符合 easycom 规范，无需 import、无需注册，模板中直接使用。

快速上手

<!-- 最简用法 -->
<Rui-datePickerPlus v-model="form.date"/>

<!-- 年月 / 年模式 -->
<Rui-datePickerPlus v-model="form.month" mode="month"/>
<Rui-datePickerPlus v-model="form.year" mode="year"/>

<!-- 快捷按钮（长期有效 / 至今） -->
<Rui-datePickerPlus v-model="form.end" shortcuts shortcutsText="至今"/>

<!-- 不可清除 + change 事件 -->
<Rui-datePickerPlus v-model="form.date" :clearable="false" @change="onChange"/>

常见有效期场景

「哨兵日期 + 自定义文案」模式：输入框回显业务文案，v-model 存储哨兵日期，后端按哨兵值识别特殊日期。

<!-- 身份证有效期：选中后显示「长期」，存储 9999-12-31 -->
<Rui-datePickerPlus v-model="form.idCardValid" shortcuts shortcutsText="长期"/>

<!-- 劳动合同：选中后显示「无固定期限」 -->
<Rui-datePickerPlus v-model="form.contractEnd" shortcuts shortcutsText="无固定期限"/>

<!-- 自定义哨兵日期：选中后存储 8888-08-08 -->
<Rui-datePickerPlus v-model="form.end" shortcuts shortcutsText="至今" shortcutsDate="8888-08-08"/>

在 uni-forms 表单中使用：

<uni-forms v-model="form">
  <uni-forms-item label="入职日期" name="dateIn">
    <Rui-datePickerPlus v-model="form.dateIn"/>
  </uni-forms-item>
  <uni-forms-item label="毕业日期" name="dateOut">
    <Rui-datePickerPlus v-model="form.dateOut" shortcuts shortcutsText="至今"/>
  </uni-forms-item>
</uni-forms>

Props

Events

使用说明

• 「此刻」按钮固定选中今天（date 模式下输出纯日期，不携带时间）
• 快捷按钮选中后，输入框显示 shortcutsText 文案，绑定值为 shortcutsDate（month / year 模式自动截取对应长度）
• 组件内部自带一层 uni-forms-item（label-width 0），放在 uni-forms-item 内或独立使用均可正常渲染
• date 模式默认输出含当前时间的完整日期串，如需纯日期请设置 :withTime="false"

兼容性

• 支持：App（vue 页面）、H5、微信 / 支付宝 / 百度 / 字节跳动 / QQ 小程序
• 不支持：nvue 页面
• Vue2、Vue3 项目均支持