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.2
In your code
import "cron-expression-input@1.2.2/cron-expression-input.min.css"; /* CSS */
require("cron-expression-input@1.2.2"); /* JAVASCRIPT */Add the CDN to your project
<link rel="stylesheet" href="https://unpkg.com/cron-expression-input@1.2.2/lib/cron-expression-input.min.css">
<script src="https://unpkg.com/cron-expression-input@1.2.2/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.2/lib/cron-expression-input.min.css">
<script src="https://unpkg.com/cron-expression-input@1.2.2/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>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.