Cron Expression Input
Description
Cron Expression UI: Input component to generate cron expressions easily and intuitively, as in https://crontab.guru/
Examples
Instructions
NPM
Install the package from https://www.npmjs.com/cron-expression-input
npm install cron-expression-input@1.3.1
In your code
import "cron-expression-input/lib/cron-expression-input.min.css"; /* CSS */
import "cron-expression-input/lib/cultures/en-US.js"; /* Languague (Optional) */
require("cron-expression-input"); /* JAVASCRIPT */CDN
Add the CDN to your project
<link rel="stylesheet" href="https://unpkg.com/cron-expression-input@1.3.1/lib/cron-expression-input.min.css">
<script src="https://unpkg.com/cron-expression-input@1.3.1/lib/cultures/en-US.js"></script> <!-- Languague (Optional) -->
<script src="https://unpkg.com/cron-expression-input@1.3.1/lib/cron-expression-input.min.js"></script>Usage
Use in html
<!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.3.1/lib/cron-expression-input.min.css">
<script src="https://unpkg.com/cron-expression-input@1.3.1/lib/cultures/en-US.js"></script> <!-- Languague (Optional) -->
<script src="https://unpkg.com/cron-expression-input@1.3.1/lib/cron-expression-input.min.js"></script>
</head>
<body>
<!-- Component -->
<form>
<cron-expression-input
height="34px" width="250px" color="d58512"
required="false" hotValidate="true"
value="* * * * *"
></cron-expression-input>
<input type="submit" value="Send Form" style="margin-top: 20px;" />
</form>
<!-- Component -->
</body>
</html>Use in React
import "cron-expression-input/lib/cron-expression-input.min.css"; /* CSS */
import "cron-expression-input/lib/cultures/en-US.js"; /* Languague (Optional) */
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"
value={this.state.cron}
required={true}
hotValidate={true}
/>
</div>
);
}
}
export default App;Use in Vue
<template>
<div id="app">
<cron-expression-input
:value="cron"
v-on:input="cron = $event.detail.value"
color="d58512"
:required="true"
:hotValidate="true"
/>
</div>
</template>
<script>
import "cron-expression-input/lib/cron-expression-input.min.css"; /* CSS */
import "cron-expression-input/lib/cultures/en-US.js"; /* Languague (Optional) */
require("cron-expression-input"); /* JAVASCRIPT */
export default {
name: 'App',
data() {
return {
cron: "* * * * *"
}
}
}
</script>Component Attributes
You can pass various attributes to the component to modify its behavior, Example with color attribute:
| Name | Type | Default Value | 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) |
value |
{String} |
* * * * * |
Allow to set a default value on the component |
required |
{Boolean} |
false |
Allow component to ship empty in a form |
hotValidate |
{Boolean} |
false |
Enable validation while writing the component, if it is set to false, it will only be validated when the submit event is performed within a form |
Languagues
import "cron-expression-input/lib/cultures/en-EN.js";
<script src="https://unpkg.com/cron-expression-input@1.3.1/lib/cultures/en-US.js"></script>
- en-US (English)
- es-Es (Spanish - Español)
- zh-CN (中文 - Chinese)
Thanks
- @TheCloudConnectors, For your npm package to validate the structure of a cron expression cron-validator.
- @bamotav, For the idea of creating this web component.