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

最新推荐文章于 2024-06-14 22:06:46 发布

煎饼萧子

最新推荐文章于 2024-06-14 22:06:46 发布

阅读量1.2k

点赞数 11

文章标签：前端 react.js

本文链接：https://blog.csdn.net/weixin_42466536/article/details/136628051

版权

本文介绍了如何在React应用中使用react-js-cron库生成Cron组件，展示如何设置和使用cron表达式，并提到了cronstrue库用于中文描述cron表达式的功能。同时，也推荐了Bree.js/later作为cron表达式的替代方案，因为原生库存在bug且维护不足。

摘要由CSDN通过智能技术生成

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