Cron Expression UI: Input component to generate cron expressions easily and intuitively, as in https://crontab.guru/
Install the package from https://www.npmjs.com/cron-expression-input
npm install cron-expression-input@1.2.7
In your code
import "cron-expression-input/lib/cron-expression-input.min.css"; /* CSS */ require("cron-expression-input"); /* JAVASCRIPT */
Add the CDN to your project
<link rel="stylesheet" href="https://unpkg.com/cron-expression-input@1.2.7/lib/cron-expression-input.min.css"> <script src="https://unpkg.com/cron-expression-input@1.2.7/lib/cron-expression-input.min.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sample Page</title> <link rel="stylesheet" href="https://unpkg.com/cron-expression-input@1.2.7/lib/cron-expression-input.min.css"> <script src="https://unpkg.com/cron-expression-input@1.2.7/lib/cron-expression-input.min.js"></script> </head> <body> <!-- Component --> <cron-expression-input color="d58512"></cron-expression-input> <!-- Component --> <script src="cron-expression-input.js"></script> </body> </html>
import "cron-expression-input/lib/cron-expression-input.min.css"; /* CSS */ require("cron-expression-input"); /* JAVASCRIPT */ class App extends React.Component { constructor(props) { super(props); this.state = { cron: "* * * * *" }; } render() { return ( <div> <cron-expression-input value={this.state.cron} onInput={(e) => this.setState({ cron: e.nativeEvent.detail.value })} color="d58512" /> </div> ); } } export default App;
<template> <div id="app"> <cron-expression-input :value="cron" v-on:input="cron = $event.detail.value" color="d58512" /> </div> </template> <script> import "cron-expression-input/lib/cron-expression-input.min.css"; /* CSS */ require("cron-expression-input"); /* JAVASCRIPT */ export default { name: 'App', data() { return { cron: "* * * * *" } } } </script>
You can pass various attributes to the component to modify its behavior, Example with color attribute:
| Name | Type | Default | Description |
|---|---|---|---|
width |
{String} |
100% |
The width of the component input |
height |
{String} |
34px |
The height of the component input |
color |
{String} |
#d58512 |
The main color that the component elements will take, (Only in hexadecimal) |
- @TheCloudConnectors, For your npm package to validate the structure of a cron expression cron-validator.
- @bamotav, For the idea of creating this web component.