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 (

<Cron

// 手动汉化

locale={ {

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');

});