cron又名七子表达式，用于选择周期性的时间

生成cron组件

使用react-js-cron

安装

npm install react-js-cron

效果图

使用

import { Cron } from 'react-js-cron';
import 'react-js-cron/dist/styles.css'; //别忘记引入样式
import { useState } from 'react';
function Cron() {
   const [cronValue, setCronValue] = useState('0 10 * * 1-5/2');
   return (
    {
       everyText: '每',
       clearButtonText: '清空',
       emptyMonths: '每个月', // 全选时的显示
       emptyMonthDays: '这个月的每一天',
       emptyWeekDays: '这周的每一天',
       emptyHours: '每小时',
       emptyMinutes: '每分',
       prefixPeriod: '每', // 年选择框前面的字
       prefixMonths: '的',
       prefixMonthDays: '的',
       prefixWeekDays: '的',
       prefixWeekDaysForMonthAndYearPeriod: '和',
       prefixHours: '的',
       prefixMinutesForHourPeriod: '的',
       suffixMinutesForHourPeriod: '分',
       yearOption: '年',
       monthOption: '月',
       weekOption: '周',
       dayOption: '日',
       hourOption: '时',
       minuteOption: '分',
       weekDays: [
           '周日', 
           '周一', 
           '周二', 
           '周三', 
           '周四', 
           '周五', 
           '周六'], // 周日为第一个，周列表选择
       months: [
            '一月',
            '二月',
            '三月',
            '四月',
            '五月',
            '六月',
            '七月',
            '八月',
            '九月',
            '十月',
            '十一月',
            '十二月',
        ], // 月列表选择
        altWeekDays: [
            '周日', 
            '周一', 
            '周二', 
            '周三', 
            '周四', 
            '周五', 
            '周六'], // 选中后的显示
         altMonths: [
             '一月',
             '二月',
             '三月',
             '四月',
             '五月',
             '六月',
             '七月',
             '八月',
             '九月',
             '十月',
             '十一月',
             '十二月',
         ],
      }}
        value={cronValue}
        setValue={setCronValue}
      />
   )
}

翻译cron

cronstrue 是一个 JavaScript 库，解析 cron 表达式并输出可读的 cron 中文描述。

插件地址：GitHub - bradymholt/cRonstrue

安装

npm install cronstrue --save

引入和使用

import cronstrue from "cronstrue/i18n"; 
cronstrue.toString(cron,{ locale: "zh_CN"})

查看最近5次运行时间

这个插件好像有bug，而且好久没维护了，建议还是由后端生成

安装

npm install @breejs/later

引入和使用

const later = require('@breejs/later');
const time = later.parse.cron(value);
const nextFiveTime = later.schedule(time).next(5).map((item) => {
    return dayjs(item).format('YYYY-MM-DD HH:mm:ss');
});