vincentjames501 / angular-cron-gen

A basic way to for users to graphically build a cron expression using Angular.

angular-cron-gen

A basic way to for users to graphically build a cron expression.

Demo can be found here.

Requirements: AngularJS 1.5+

Usage:

1. Include the dependency in your app

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

2. Include the supplied JS and CSS file (or create your own CSS to override defaults).

   <link rel='stylesheet' href='build/cron-gen.min.css' type='text/css' media='all' />
   <script type='text/javascript' src='build/cron-gen.min.js'></script>

3. That's it -- you're done!

Via bower:

$ bower install angular-cron-gen

Via npm:

$ npm install angular-cron-gen

Options

<cron-gen ng-model="cronExpression" 
          options="cronOptions" 
          template-url="your optional, custom template (Defaults to a bootstrap 3 template)"
          cron-format="quartz (Currently only compatible with 'quartz' and defaults to 'quartz')"
          ng-disabled="isCronDisabled">
</cron-gen>

angular.module('myApp', ['angular-cron-gen'])
  .controller('myController', ['$scope', ($scope) => {
    $scope.cronExpression = '0 0 0/3 1/1 * ? *';
    $scope.isCronDisabled = false;
    $scope.cronOptions = {
      formInputClass: 'form-control cron-gen-input', // Form input class override
      formSelectClass: 'form-control cron-gen-select', // Select class override
      formRadioClass: 'cron-gen-radio', // Radio class override
      formCheckboxClass: 'cron-gen-checkbox', // Radio class override
      hideMinutesTab: false, // Whether to hide the minutes tab
      hideHourlyTab: false, // Whether to hide the hourly tab
      hideDailyTab: false, // Whether to hide the daily tab
      hideWeeklyTab: false, // Whether to hide the weekly tab
      hideMonthlyTab: false, // Whether to hide the monthly tab
      hideYearlyTab: false, // Whether to hide the yearly tab
      hideAdvancedTab: true, // Whether to hide the advanced tab
      use24HourTime: false, // Whether to show AM/PM on the time selectors
      hideSeconds: false // Whether to show/hide the seconds time picker
    };
  }])

License:

Licensed under the MIT license

angular-cron-gen's Issues

choose tab on init

how can i change the selected tab on init?

Default time?

Is there a way to specify a default hour+minute+second for the time pickers?

Human readable cron

Users of angular-cron-gen library would most probably benefit a lot from a "human readable" explanation option of a cron result. Example: 0 0 11 1/1 * ? * could be easily displayed as At 01:00 AM, only on Monday and Wednesday.

Would an integration with libraries like cronstrue be a good idea? I could gladly submit a PR for this.

Is there any method to know which tab been selected?

Hello,

I'm switching between tabs Hourly/Monthly/Daily/Weekly, can someone help me
Is there any method to know that which tab i was in?

Help more appreciated,

Thanks,

Having a separate Weekday checkbox

Would be nice to have a separate Weekday checkbox to wizard like produce the following:
0 0 0 1W 1/1 ? *: on the first weekday of the month
0 0 0 14W 1/1 ? *: on the weekday nearest day 14 of the month (missing)
0 0 0 LW 1/1 ? *: on the last weekday of the month

Proposal:

In Montly having "On the":
First (without "Weekday")
1
..
31
Last (without "Weekday")

Additional checkbox for Weekday modifier ("W")

Error: unable to minify JavaScript

see:
https://www.npmjs.com/package/angular-cron-gen
include this lib use bower install, and then:
execute gulp build command . error .
gulp-notify: Error: unable to minify JavaScript
You code seems ES6 syntax...
what happened ? thank you.

Unneeded dependency to Symbol

I think the dependency to Symbol is unneeded.
It took too long for me to figure out what I exactly need to incorporate it in my application. At the end I adapted the source:

var States = {
    INIT: 1, // Symbol('INIT'),
    DIRTY: 2, // Symbol('DIRTY'),
    CLEAN: 3 // Symbol('CLEAN')
};

I don't think you win something to be cutting-edge using Symbol.
Having a library with as few dependencies as possible is always the best.

cron not support hangfire?

Radio Button on the daily tab is not marked when it is selected

on the daily tab the radio button is not marked with the item selected. functionally it is working finr but user cant see the option he selected. @vincentjames501 @AntonisFK

use24HourTime option is causing ngForm to be invalid

Hi. Great plugin. I use it inside <form> with Angular Validation.

With use24HourTime option the AM/PM selector is hidden. And that's what I see in HTML:

It is hidden but it is also required and it has no default value, because of that my form is invalid.

{
  "$error": {
    "required": [
      {
        "$viewValue": null,
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [],
        "$formatters": [],
        "$viewChangeListeners": [
          null
        ],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "HourType",
        "$options": null
      }
    ]
  },
  "$name": "$ctrl.form",
  "$dirty": true,
  "$pristine": false,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
....

Any way to fix this? Thanks.

Link to cron expression documentation is wrong

This link is wrong and should be updated

angular-cron-gen/src/templates/cron-gen.html

Line 479 in f3a2885

<p>More details about how to create these expressions can be found <a

The move to template-url disallows the use of scoped values

One of the older versions of your library allowed for the specification of a user-defined template via an options.templateUrl property. The switch to a templateUrl function now no longer allows the user to use a scoped variable as, per the angular documentation, scoped values are not accessible because the template function is executed before the scope is even initialized.

This means that one cannot do template-url="{{ vm.template }}". I don't have a great solution here and it's clear that angular is not going to fix this issue.

You can see the issue here along with an attempted fix using injected $element, $attrs service values. You can ignore the parsing error and just look at the template value.

Seconds Field

I installed this via bower specifically for the supported quartz cron format. But the "seconds" field is missing from the bower install.

bower i --save angular-cron-gen

I'm using all the default settings plus the advanced tab.

$scope.cronExpression = '0 0 0/3 1/1 * ? *'; $scope.isCronDisabled = false; $scope.cronOptions = { formInputClass: 'form-control cron-gen-input', formSelectClass: 'form-control cron-gen-select', formRadioClass: 'form-control-static cron-gen-radio', formCheckboxClass: 'form-control-static cron-gen-checkbox', hideMinutesTab: false, hideHourlyTab: false, hideDailyTab: false, hideWeeklyTab: false, hideMonthlyTab: false, hideYearlyTab: false, hideAdvancedTab: false, use24HourTime: false, hideSeconds: false }

Based on the repo is should exist, but I cannot find it in the installed package. Is there something I'm doing incorrectly?

Weekly select show undefined

Hey, i have an issue on a select in the monthly tab, the list is filled with undefined values.

this is the control :

 <select class="month-days"
                                    name="monthlySpecificDayDay"
                                    ng-disabled="$ctrl.ngDisabled || $ctrl.activeTab !== 'monthly' || $ctrl.state.monthly.subTab !== 'specificDay'"
                                    ng-change="$ctrl.regenerateCron()"
                                    ng-model="$ctrl.state.monthly.specificDay.day"
                                    ng-required="$ctrl.activeTab === 'monthly' && $ctrl.state.monthly.subTab === 'specificDay'"
                                    ng-options="monthDaysWithLast as $ctrl.monthDayDisplay(monthDaysWithLast) for monthDaysWithLast in $ctrl.selectOptions.monthDaysWithLasts"
                                    ng-class="$ctrl.parsedOptions.formSelectClass"></select>

code of the list generation :

 monthDaysWithLasts: ["1W"].concat(s([].concat(s(new Array(31).keys())).map(function (e) {
                return "" + (e + 1)
            })), ["LW", "L"]) 

Values generated : undefined, undefined,undefined,undefined,undefined,...

Number of days is not correct

Hello Vincent,
Thanks for this great library.
We use the library in our project, and we discover that the nb of days in the selected month is not correct for example February is always 31 days.

would you accept a fix for this, I have two solutions for this
1- To change the value of monthDaysWithLasts :
monthDaysWithLasts: {
'1': ["1W"].concat(r(r(new Array(31)).map(function(e,t){return"".concat(t+1)})),["LW","L"]),
'2': ["1W"].concat(r(r(new Array(new Date(new Date().getFullYear(), 2, 0).getDate())).map(function(e,t){return"".concat(t+1)})),["LW","L"]),
'3': ["1W"].concat(r(r(new Array(31)).map(function(e,t){return"".concat(t+1)})),["LW","L"]),
'4': ["1W"].concat(r(r(new Array(30)).map(function(e,t){return"".concat(t+1)})),["LW","L"]),
'5': ["1W"].concat(r(r(new Array(31)).map(function(e,t){return"".concat(t+1)})),["LW","L"]),
'6': ["1W"].concat(r(r(new Array(31)).map(function(e,t){return"".concat(t+1)})),["LW","L"]),
'7': ["1W"].concat(r(r(new Array(31)).map(function(e,t){return"".concat(t+1)})),["LW","L"]),
'8': ["1W"].concat(r(r(new Array(31)).map(function(e,t){return"".concat(t+1)})),["LW","L"]),
'9': ["1W"].concat(r(r(new Array(3)).map(function(e,t){return"".concat(t+1)})),["LW","L"]),
'10': ["1W"].concat(r(r(new Array(31)).map(function(e,t){return"".concat(t+1)})),["LW","L"]),
'11': ["1W"].concat(r(r(new Array(30)).map(function(e,t){return"".concat(t+1)})),["LW","L"]),
'12': ["1W"].concat(r(r(new Array(31)).map(function(e,t){return"".concat(t+1)})),["LW","L"])
}

2- to calculate monthDaysWithLasts in a separate function

what do you think?

hide minutes

Can someone please let me know how to hide minutes selection dropdown in all the tabs ??

Thanks,
Anil

IE Support

IE doesn't support the use of the Symbol function used in cron-gen.js. :(

use24HourTime option does not refresh the model correctly

Hello

If we set the use24HourTime option to true, the model is not correctly refreshed.
For example, if you set every day at 22, you will reload with every day at 10.

You could see the bug here :
http://jsfiddle.net/ascott42/w5dzge1f/6/

The ngModel watcher is triggered before the option watcher that's why the model is not computed with the 24 hour time format.
I fix it by recomputing the model every time options change, but this is not a very optimized solution (the cron is now analyzed two times).

// Watch for option changes
        $scope.$watch('$ctrl.options', function (options) {
            _this.parsedOptions = _this.mergeDefaultOptions(options);
            return _this.handleModelChange(_this.ngModel);
        }, true);

I'm interested in your opinion on this
Thanks

How can we add the same functionality in angular-2 or angular-4.Please help

How can we convert the same functionality to angular-2.

Keep cron expression when moving to advanced tab

Hi,
Is there a way to keep the same cron expression generated in any tab, once I move to the Advanced tab?

hideAdvancedTab still displays the Advanced tab

$scope.cronOptions = {
...
hideMinutesTab: false,
hideHourlyTab: false,
hideDailyTab: false,
hideWeeklyTab: false,
hideMonthlyTab: false,
hideYearlyTab: true,
hideAdvancedTab: true,
use24HourTime: false,
hideSeconds: true
};

And I still get the advanced tab:

How to use it without bootstrap?

I've followed the instructions on the README.md:

1. Include the dependency in your app

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

2. Include the supplied JS and CSS file (or create your own CSS to override defaults).

<link rel='stylesheet' href='build/cron-gen.min.css' type='text/css' media='all' /> 
<script type='text/javascript' src='build/cron-gen.min.js'></script>

Nevertheless, although the Widget appear, the layout is totally incorrect, indicating some problem with the CSS. Only when including the Bootstrap CSS the widget appears as in the Demo page.
Unfortunately, we cannot use the Bootstrap CSS, so i would like to know if the Widget only works correctly when including the Bootstrap CSS, or if there is a way to use it without it.

Regards, and thank you for your excellent widget.

ng-model empty behaves like it is scheduled by minute

Once the ng-Model is empty, the cron gen behaves like it is scheduled by minute !!
How to initialise it as empty ? to get it as not scheduled ?

Localization

Hello,

I'm not sure it's an issue but I couldn't found localization/i18n support.

It would be great if it have support for it or if we could at least set the day names and some constants in the cronOptions parameter.

December Option Missing

Minor tweak needed to add December to the "Yearly" tab option.

Hide minutes from all tabs

how to hide minutes and seconds fields from all tabs?

default value for formInputClass and formSelectClass is wrong in the example html

Current default values:

• "form-control-static cron-gen-input"
• "form-control-static cron-gen-select"

Proposed fix:

• "form-control cron-gen-input"
• "form-control cron-gen-select"

From server side perspective

Sorry for asking here.
Which node js library fits best with this cron generator?
I need it to accept the generated cron and execute the task on the backend.
Thanks in advance

Adopt with Angular 1.4+

We are using ng 1.4.8 in our company and as far as our product consist of several big modules it is not possible for us to migrate ng to higher version right now. So I was thinking to change source code of angular-cron-gen to adopt it to ng 1.4.

I checked source code of angular-cron-gen and find out the most used feature of ng 1.5 is components instead of directives. Is there any other feature of ng 1.5 used that I should change? any other suggestion appreciated.

"form-control-static" class causes unalignment bug in the weekly tab with more recent versions of bootstrap3 (i.e. 3.3.7)

In more recent versions of bootstrap they added a min-height: 34px property to form-control-static.

This makes the name of the days in the weekly tab unaligned. Since all the other properties of this class are being overwritten in other css, I propose that this class should be removed from the radio and checkbox class definition.

Custom Advanced tab

Hi,

How can i change the content of the advanced tab ?
I want to remove some text (without touching node modules)

Is a shim needed for IE 11 support in versions after 0.20?

In cron-gen.module.js IE 11 throws an error "Object doesn't support property or method 'keys'" when setting up the SELECT_OPTIONS object. Is a shim needed to support the keys property? Seems the demo doesn't work under IE either but could be a bad setting on my part.

Angular 2

It would be nice if we could use the library with Angular 2+. Any plans of upgrading? Would you accept a PR for this?

ES 5 version?

Hello, great work on this! I was wondering if it would be possible to create a ES 5 version?

Using angular-cron-gen in modal, week tab layout failure

Noticed a small flaw when using angular-cron-gen in a modal. The weekdays in the week tab are not grid-like positioned.

Tried also with container and container-fluid in modal.

I think of the inproper use of http://getbootstrap.com/css/#forms-controls-static

<script type="text/ng-template" id="wfEditCronExpressionHelper.html">
                            <div class="modal-header">
                                <h3 class="modal-title custom-font">Cron Expression Helper</h3>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div>
                                        <cron-gen ng-model="vm.editCronExpressionHelperCronExpression" options="vm.editCronExpressionHelperCronOptions"></cron-gen>
                                    </div>
                                </div>
                            <div class="modal-footer">
                                <button class="btn btn-success btn-ef btn-ef-3 btn-ef-3c" ng-click="ok()"><i class="fa fa-arrow-right"></i>OK (use expression)</button>
                                <button class="btn btn-lightred btn-ef btn-ef-4 btn-ef-4c" ng-click="cancel()"><i class="fa fa-arrow-left"></i>Cancel</button>
                            </div>
                        </script>

        vm.editCronExpressionHelper = function () {

            var modalInstance = $uibModal.open({
                templateUrl: 'wfEditCronExpressionHelper.html',
                controller: 'SimpleItemModalInstanceCtrl',
                scope: $scope,
                size: "lg",
            });

            modalInstance.result.then(function () {
                // something
            }, function () {
            });
        };

Disable edit

Is it possible to use the same cron-gen for a cron display only?