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.