Welcome to Cron Input UI library 👋

✨ Description

Cron Input UI: Input component to generate cron expressions easily and intuitively, as in crontab.guru.

📸 Previews

Input look (customizable, multiple)

Modal look

Synced expression with the input & real time human text

Warning messages

Locales support (see Languages available)

📥 Installation

Cron Expression Input is exported as an UMD module so it will work in an AMD, CommonJS or browser global context.

First, install the module:

npm install cron-input-ui

Then, depending upon your usage context, add a reference to it:

ESM / Webpack / TypeScript

1import 'cron-input-ui';
2import 'cron-input-ui/dist/locales/en.js';
3import 'cron-input-ui/dist/cron-input-ui.min.css';

Browser

The cron-input-ui.min.js file from the /dist folder in the npm package should be served to the browser. There are no dependencies so you can simply include the library in a <script> tag.

1<link rel="stylesheet" href="cron-input-ui.min.css" />
2
3<form>
4    <cron-input-ui height="34px" width="250px" color="d58512" required hot-validate value="* * * * *">
5    </cron-input-ui>
6    <br>
7    <input type="submit" value="Send form" />
8</form>
9
10<script src="cron-input-ui.min.js" type="text/javascript"></script>
11<script src="locales/en.js" type="text/javascript"></script>

CDN

A simple way to load the library in a browser is by using the unpkg CDN, which is a "fast, global content delivery network for everything on npm". To use it, include a script tag like this in your file:

1<script src="https://unpkg.com/cron-input-ui@2.3.0/dist/cron-input-ui.min.js" async></script>
2<!-- Language (Optional) -->
3<script src="https://unpkg.com/cron-input-ui@2.3.0/dist/locales/en.js" async></script>

Using the "latest" tag will result in a 302 redirect to the latest version tag so it is recommended to use a specific version tag such as https://unpkg.com/cron-input-ui@2.3.0/dist/cron-input-ui.min.js to avoid this redirect.

React

1import 'cron-input-ui/dist/cron-input-ui.min.css';
2/* Language (Optional) */
3import 'cron-input-ui/dist/locales/en.js';
4import 'cron-input-ui';
5
6class App extends React.Component {
7    constructor(props) {
8        super(props);
9        this.state = { cron: '* * * * *' };
10    }
11
12    render() {
13        return (
14            <div>
15                <cron-input-ui
16                  value={this.state.cron}
17                  onInput={(e) => this.setState({ cron: e.nativeEvent.detail.value })}
18                  color='d58512'
19                  value={this.state.cron}
20                  required
21                  hotValidate />
22            </div>
23        );
24    }
25}
26
27export default App;

Vue

1<template>
2  <div id="app">
3    <cron-input-ui
4      :value="cron"
5      @input="cron = $event.detail.value"
6      color="d58512"
7      :required="true"
8      :hot-validate="true"
9     />
10  </div>
11</template>
12
13<script>
14import 'cron-input-ui/dist/cron-input-ui.min.css';
15/* Language (Optional) */
16import 'cron-input-ui/dist/locales/en.js';
17import 'cron-input-ui';
18
19export default {
20  name: 'App',
21  data() {
22    return {
23      cron: '* * * * *'
24    }
25  }
26}
27</script>

Component Attributes

You can pass various attributes to the component to modify its behavior, Example with color attribute:

Name	Type	Default Value	Description
name	{String}	cron	The name that the form variable
width	{String}	234px	The width of the component input
height	{String}	34px	The height of the component input
value	{String}	* * * * *	Allow to set a default value on the component
color	{String}	#d58512	The main color that the component elements will take (hexadecimal recommended)
required	{Boolean}	false	Allow component to be empty, if set, the form will not validate when empty
hot-validate	{Boolean}	false	Enable cron validation while editing it, if not set, it will only be validated when the submit event is performed within a form or by clicking on the save button
show-message	{Boolean}	false	Display the cron representation in human language below the input (always visible in cron modal and on hover of the input)
no-input	{Boolean}	false	Disable the input and only allow the cron to be edited in the modal
hide-other-tabs	{Boolean}	false	Hide the tabs that are not selected, useful when you want to show the current clicked tab for the user (more UX)
default-tab	{String}	minutes	The default tab that will be displayed when the component is loaded, it can be: minutes, hours, days-of-month, months, days-of-week or year

Languages

import 'cron-input-ui/dist/locales/es.js';
OR
<script src="https://unpkg.com/cron-input-ui@2.3.0/dist/locales/es.js"></script>

• en (English)
• fr (French - Français)
• es (Spanish - Español)
• zh_CN (中文 - Chinese)

Integration

Choosing a lang, from the CDN or via custom import will try to implement cRonstrue language corresponding if it exists.

This was not tested for any personal language but it should work if the lang code is the same (POSIX format).

Thanks

• @JossyDevers, The original author of this library that made this great project.
• @TheCloudConnectors, For your npm package to validate the structure of a cron expression cron-validator.
• @bamotav, For the idea of ​​creating this web component.