# cron-expression-input **Repository Path**: seamam/cron-expression-input ## Basic Information - **Project Name**: cron-expression-input - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-02-05 - **Last Updated**: 2026-02-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

Cron Expression Input

[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/JossyDevers/transpiler-js/blob/master/LICENSE) [![GitHub Release](https://img.shields.io/github/v/release/jossydevers/transpiler-js)]() ## Description

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

### Examples
cron-expression-input cron-expression-input-modal

Instructions

### NPM Install the package from https://www.npmjs.com/cron-expression-input ``` npm install cron-expression-input@1.2.7 ``` In your code ``` javascript import "cron-expression-input/lib/cron-expression-input.min.css"; /* CSS */ require("cron-expression-input"); /* JAVASCRIPT */ ``` ### CDN Add the CDN to your project ``` html ``` ### Usage

Use in html

``` html Sample Page ```

Use in React

```javascript 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 (
this.setState({ cron: e.nativeEvent.detail.value })} color="d58512" />
); } } export default App; ```

Use in Vue

```javascript ```

Component Attributes

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)|

Thanks

* [@TheCloudConnectors](https://github.com/TheCloudConnectors), For your npm package to validate the structure of a cron expression [cron-validator](https://github.com/TheCloudConnectors/cron-validator). * [@bamotav](https://github.com/bamotav), For the idea of ​​creating this web component.