Skip to content
UI Component For Creating Cron Job Syntax To Send To Server
Branch: master
Clone or download
Latest commit 87e0adb Sep 20, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Project build Sep 20, 2016
src chore: use double quotes Sep 19, 2016
.gitignore release number fix and code cleanup Sep 14, 2016
Gruntfile.js codacy fixes Sep 14, 2016

Build Status Coverage Status Codacy Badge npm version


UI Component For Creating Cron Job Syntax To Send To Server

##Demo ##Installation

Install using bower:

bower install angular-cron-jobs


Include the component in your application:

angular.module('myApp', ['angular-cron-jobs']);

Insert the directive where you would like it to appear in your application:

<cron-selection ng-model="myOutput"></cron-selection>

By setting the ng-model attribute equal to a value in your controller (i.e. $scope.myOutput in the example above) you have access to the cron syntax output.

For example, a job selected to run every month on the 11th at 4:10 AM would output the follow:

'10 4 11 * *'

as a string.


The directive takes an optional attribute of config

<cron-selection ng-model="myOutput" config="myConfig"></cron-selection>


This is an object in your controller you can use to remove options from the user. For example if you would like the user to be able to set Minute, Hour, and Day but not Week, Month, and Year you would create the following object in your controller:

$scope.myConfig = {
    options: {
        allowWeek : false,
        allowMonth : false,
        allowYear : false

Currently the config object accepts an options property with an object of allowed selections. These include:

  • allowMinute
  • allowHour
  • allowDay
  • allowWeek
  • allowMonth
  • allowYear

Setting the keys as booleans will turn the selection on and off.


You can also set whether or not you want to allow a user to select multiple calues for a cron:

$scope.myConfig = {
    allowMultiple: true

Setting allowMultiple to either true or false will toggle the ability.

###Quartz by RajanRastogi

By default, the cron expression generated is Unix Cron compatible. Incase you use the Quartz Scheduler, you would want to enable the quartz mode in the options. You can do so by passing that flag as true in the config object.

$scope.myConfig = {
    quartz: true

In case you are using a custom template, please be sure to pass an extra argument cronStyle to the cronDayName filter. So your code should look something like this:

value as (value | cronDayName: cronStyle) for value in dayValues

A complete config object may look like the following:

$scope.myConfig = {
    allowMultiple: true,
    options: {
        allowWeek : false,
        allowMonth : false,
        allowYear : false
    quartz: true

##Custom Templates:

As noted by TimotheeJeannin you can use custom template by setting the template attribute on your cron DOM element:

<cron-selection template="path/to/my/template.html"></cron-selection>

##Initializing UI with data from server

The directive takes an attribute of ng-model used for init and output data.

<cron-selection ng-model="myOutput" config="myConfig"></cron-selection>

This is a string in your controller of cron syntax that was recieved from your server or any other source:

$scope.myOutput = "30 2 4 * *"

Thew directive will properly build out the UI to reflect this data.

##Setting Cron after directive load

The ng-model attribute also works as a reset attribute

<cron-selection ng-model="myOutput" config="myConfig"></cron-selection>

This is an expression paired with a value in your controller. Whenever the value changes (or is set for the first time) and passed the angular.isDefined() method the cron will reset itself to match that value

   $scope.myOutput = "0 0 * * *"
}, 3000);

The directive will properly build out the UI to reflect this data.

##Utilize Exposed $scope.myFrequency:

the frequency attribute grants you exposure to the $scope.myFrequency object inside the directive. It is two way bound so you can manipulate it from outside the directive as well.

The type of {number|Array.<number>} depends on the following: number if allowMultiple is false and Array if allowMultiple is true

Properties you now have access to via frequency attribute include:

  • base {number} 1-6 (minute thru year)
  • minuteValue {number|Array.<number>} 0-55 (increments of 5)
  • hourValue {number|Array.<number>} 1-23
  • dayOfMonthValue {number|Array.<number>} 0-6 (Sunday thru Saturday)
  • monthValue {number|Array.<number>} 1-12

###You can get away from using select inputs in your custom temple using the frequency attribute.

####Demo Without Using Selects



[@immertreu] (

[@TSteele27] (

[@DmitryEfimenki] (

##Coming Soon:

The next big to-do's on my list include:

  • Support generlized selections such as a one button click for "Every Five Minutes" or "Last Thursday of Every Month"
You can’t perform that action at this time.