更新记录

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

• 初始发布
• 支持 daily / monthly / once 三种调度模式
• 时分选择使用浮动滚轮卡片（picker-view）
• daily 模式支持周几多选，至少保留一天
• 支持 v-model 双向绑定与编辑回填
• 新增 icon-class prop，支持自定义图标
• 支持通过 provide/inject 向父级注册关闭函数

平台兼容性

uni-app(4.08)

uni-app x(4.42)

CronTimePicker 定时任务时间选择器

支持每天 / 每月 / 单次三种模式的时间选择组件，自动输出标准 Cron 表达式或日期时间字符串，适用于定时任务、自动化提醒等配置场景。

功能特性

• 三种调度模式：每天（指定时间 + 周几多选）、每月（指定日期 + 时间）、单次（指定完整日期时间）
• 时分选择使用浮动滚轮卡片，点击时间按钮弹出，点击外部自动关闭
• 每天模式支持周几多选，至少保留一天
• 支持 v-model 双向绑定，值变化时自动 emit
• 支持编辑回填（传入已有 cron 值自动还原界面状态）
• 支持自定义图标 class（兼容各类 iconfont）
• 支持父级注入关闭函数，实现点击页面空白处关闭浮层

依赖

• uni-datetime-picker（DCloud 官方组件，monthly / once 模式需要）

  在 HBuilderX 中通过「插件市场」安装 uni-datetime-picker，或在项目根目录执行：

  # 通过 uni_modules 安装
  # HBuilderX → 工具 → 插件市场 → 搜索 uni-datetime-picker → 安装到项目

安装

在 HBuilderX 插件市场找到本插件，点击「导入插件」，选择目标项目即可。

安装后组件通过 easycom 自动注册，无需手动 import。

基础用法

<template>
  <cron-time-picker v-model="cronValue" mode="daily" />
  <text>当前值：{{ cronValue }}</text>
</template>

<script setup>
import { ref } from 'vue';
const cronValue = ref('');
</script>

三种模式示例

<template>
  <!-- 每天模式：输出 "分 时 * * 周几,周几" -->
  <cron-time-picker v-model="daily" mode="daily" />

  <!-- 每月模式：输出 "分 时 日 * *" -->
  <cron-time-picker v-model="monthly" mode="monthly" />

  <!-- 单次模式：输出 "YYYY-MM-DD HH:mm:00" -->
  <cron-time-picker v-model="once" mode="once" />
</template>

<script setup>
import { ref } from 'vue';
const daily   = ref('');
const monthly = ref('');
const once    = ref('');
</script>

编辑回填

直接给 v-model 传入已有值，组件会自动解析并还原界面状态：

<!-- 每天模式回填：周一三五 09:30 -->
<cron-time-picker v-model="cronValue" mode="daily" />

<script setup>
import { ref } from 'vue';
// 组件挂载后自动解析，显示 09:30，周一三五选中
const cronValue = ref('30 9 * * 1,3,5');
</script>

monthly 模式回填时，cron 第3字段只有「日」，需要配合 initial-date 提供年月信息：

<cron-time-picker
  v-model="cronValue"
  mode="monthly"
  initial-date="2026-05-01"
/>

自定义图标

默认显示 ⏱ 字符作为图标。如果项目中有 iconfont，可通过 icon-class 传入类名：

<cron-time-picker v-model="cronValue" mode="daily" icon-class="iconfont icon-clock" />

父级关闭集成（可选）

点击页面空白处关闭时间滚轮浮层，需要在父组件中配合 provide 使用：

<template>
  <!-- 点击页面任意空白处关闭浮层 -->
  <view @tap="closeAllPickers">
    <cron-time-picker v-model="cronValue" mode="daily" />
  </view>
</template>

<script setup>
import { ref, provide } from 'vue';

const cronValue = ref('');

// 存储子组件注册的关闭函数
let _closeFn = null;

provide('registerCloseTimePicker', (fn) => {
  _closeFn = fn;
});

const closeAllPickers = () => {
  _closeFn?.();
};
</script>

Props

Events

输出格式说明

daily 模式中周几使用数字：0 = 周日，1 = 周一，…，6 = 周六（标准 cron 规范）。

平台兼容性

nvue 不支持 picker-view，暂不兼容。

Changelog

1.0.0

• 初始发布
• 支持 daily / monthly / once 三种模式
• 支持 v-model 双向绑定与编辑回填
• 支持父级注入关闭函数