前端cron相关功能插件组件使用总结

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