npmpackage.info

Gathering detailed insights and metrics for cron-expression-input

Other packages similar to cron-expression-input

cron-input-ui

2.4.0

Input component to generate cron expressions easily and intuitively

react-native-cron

0.0.5

A cron expression input. Show the user if the cron expression is valid or not.

cron-time-formatter

1.0.5

A Node.js utility to parse and format cron expressions into a human-readable format. It validates the input and outputs the detailed breakdown of each field in the cron expression

node-red-contrib-payload-cron

1.1.0

Cron scheduler node for node-red which takes the input of msg.payload as the cron expression and outputs the epoch unix timestamp at the time the cron job is triggered.

Gathering detailed insights and metrics for cron-expression-input

cron-expression-input - 1.3.1 | npmpackage.info

cron-expression-input

Cron UI: Input component to generate cron expressions easily and intuitively

1.3.1

MIT

JavaScript

221.59 kB

4.3

Installations

npm install cron-expression-input

Developer Guide

BETA

Typescript

No

Module System

CommonJS, ESM

Node Version

14.13.0

NPM Version

6.14.8 Pull Requests

Open

4

Total

38

Closed

10

Merged

24

Issues

Open

5

Total

8

Closed

3

Releases

v1.2.7

Updated on Oct 24, 2020

v1.2.2

Updated on Oct 22, 2020

View All 2 releases

Languages

JavaScript

CSS

HTML

JavaScript (64.92%)

CSS (33.58%)

HTML (1.5%)

Developer

JossyDevers

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

69 Stars

59 Commits

23 Forks

2 Watchers

7 Branches

3 Contributors

Updated on Jun 12, 2025

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

1.3.1

Package Id

cron-expression-input@1.3.1

Unpacked Size

221.59 kB

Size

26.13 kB

File Count

NPM Version

6.14.8

Node Version

14.13.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

cron-validator cronstrue

Dev Dependencies

@babel/cli @babel/core @babel/preset-env babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server

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.2.7

In your code

1import "cron-expression-input/lib/cron-expression-input.min.css"; /* CSS */
2require("cron-expression-input"); /* JAVASCRIPT */

CDN

Add the CDN to your project

1<link rel="stylesheet" href="https://unpkg.com/cron-expression-input@1.2.7/lib/cron-expression-input.min.css">
2<script src="https://unpkg.com/cron-expression-input@1.2.7/lib/cron-expression-input.min.js"></script>

Usage

Use in html

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Sample Page</title>
7    <link rel="stylesheet" href="https://unpkg.com/cron-expression-input@1.2.7/lib/cron-expression-input.min.css">
8    <script src="https://unpkg.com/cron-expression-input@1.2.7/lib/cron-expression-input.min.js"></script>
9</head>
10<body>
11    <!-- Component -->
12    <cron-expression-input color="d58512"></cron-expression-input>
13    <!-- Component -->
14    <script src="cron-expression-input.js"></script>
15</body>
16</html>

Use in React

1import "cron-expression-input/lib/cron-expression-input.min.css"; /* CSS */
2require("cron-expression-input"); /* JAVASCRIPT */
3
4class App extends React.Component {
5  constructor(props) {
6    super(props);
7    this.state = { cron: "* * * * *" };
8  }
9
10  render() {
11    return (
12      <div>
13        <cron-expression-input
14          value={this.state.cron}
15          onInput={(e) => this.setState({ cron: e.nativeEvent.detail.value })}
16          color="d58512" />
17      </div>
18    );
19  }
20}
21
22export default App;

Use in Vue

1<template>
2  <div id="app">
3    <cron-expression-input
4      :value="cron"
5      v-on:input="cron = $event.detail.value"
6      color="d58512" />
7  </div>
8</template>
9
10<script>
11import "cron-expression-input/lib/cron-expression-input.min.css"; /* CSS */
12require("cron-expression-input"); /* JAVASCRIPT */
13
14export default {
15  name: 'App',
16  data() {
17    return {
18      cron: "* * * * *"
19    }
20  }
21}
22</script>

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, For your npm package to validate the structure of a cron expression cron-validator.
@bamotav, For the idea of creating this web component.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

7

SAST

Determines if the project uses static code analysis.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More