Skip to content

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

License

Notifications You must be signed in to change notification settings

JossyDevers/cron-expression-input

Repository files navigation

Cron Expression Input

MIT License GitHub Release

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

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

CDN

Add the CDN to your project

<link rel="stylesheet" href="https://unpkg.com/cron-expression-input@1.2.7/lib/cron-expression-input.min.css">
<script src="https://unpkg.com/cron-expression-input@1.2.7/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.2.7/lib/cron-expression-input.min.css">
    <script src="https://unpkg.com/cron-expression-input@1.2.7/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>

Use in React

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 (
      <div>
        <cron-expression-input
          value={this.state.cron}
          onInput={(e) => this.setState({ cron: e.nativeEvent.detail.value })}
          color="d58512" />
      </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" />
  </div>
</template>

<script>
import "cron-expression-input/lib/cron-expression-input.min.css"; /* CSS */
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 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