Is there an angular support to this plugin?

[vijaivp]

Is there an angular directive in existence that will load this jquery plugin.

[kelvinatorr]

You can use something like this

app.directive("clockPicker", function(){ return { restrict: "A", link: function(scope,element,attrs) { // Initialize the clockpicker with options.
element.clockpicker({ placement: 'top', donetext: 'Done' }); } } });

The to use it:

[ghost]

Thanks, done.

[rtrompier]

Hi, Does it work for you ?

Thx

[rtrompier]

Can you send me your directive please ?

Because my model is not updated. View is ok ;)

[maliarov]

Best what I have within 5 mins.

(function () {

    function directive (parse) {
        function link (scope, elm, attrs, ngModel) {

            var inputElm = $('input', elm);
            var modelGetter = parse(attrs['ngModel']);
            var modelSetter = modelGetter.assign;

            function afterUpdate () {
                var value = modelGetter(scope);
                if (value) {
                    value = moment(value);
                }

                var inputVal = moment(inputElm.val(), 'HH:mm');
                if (inputVal.isValid()) {
                    if (!value) {
                        modelSetter(scope, inputVal.toDate());
                    } else {
                        value.hour(inputVal.hour());
                        value.minute(inputVal.minute());

                        modelSetter(scope, value.toDate());

                        scope.$digest();
                    }
                }
            }

            elm
                .clockpicker({
                    donetext: 'Done',
                    autoclose: true,
                    afterDone: afterUpdate
                });


            inputElm.blur(afterUpdate);

            ngModel.$formatters.push(function (value) {
                if (value) {
                    inputElm.val(moment(value).format('HH:mm'));
                }

                return value;
            });

        }

        return {
            restrict: 'C',
            require: 'ngModel',
            link: link
        };
    }

    angular
        .module('clockpicker')
        .directive('clockpicker', ['$parse', directive]);
})();

  <div class="input-group clockpicker" ng-model="someScopeVariable">
    <input type="text" class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
      </span>
   </div>

[evdoks]

Thanks a lot, @mujichOk !

The only thing I had to change to make model updates working is to add $timeout to afterUpdate function. So my directive looks like this:

angular.module('myApp')
    .directive('clockpicker', ['$timeout', '$parse', function ($timeout, $parse) {
        return {
            restrict: 'C',
            require: 'ngModel',
            link: function link(scope, elm, attrs, ngModel) {
                var inputElm = $('input', elm);
                var modelGetter = $parse(attrs['ngModel']);
                var modelSetter = modelGetter.assign;
                function afterUpdate() {
                    return $timeout(function () {
                        var value = modelGetter(scope);
                        if (value) {
                            value = moment(value);
                        }
                        var inputVal = moment(inputElm.val(), 'HH:mm');
                        if (inputVal.isValid()) {
                            if (!value) {
                                modelSetter(scope, inputVal.toDate());
                            } else {
                                value.hour(inputVal.hour());
                                value.minute(inputVal.minute());

                                modelSetter(scope, value.toDate());

                                scope.$digest();
                            }
                        }
                    })
                }
                elm.clockpicker({
                        donetext: 'Done',
                        autoclose: true,
                        afterDone: afterUpdate
                    });
                inputElm.blur(afterUpdate);
                ngModel.$formatters.push(function (value) {
                    if (value) {
                        inputElm.val(moment(value).format('HH:mm'));
                    }
                    return value;
                });
            }
        }
    }]);

[Prashanth-iNautix]

First thanks for the above answers. However, I am unable to update my model. Please advise @mujichOk @evdoks . The old value still persists.

[Domitnator]

@Prashanth-iNautix : Try to change scope.$digest(); to scope.$apply(); In my case this did the trick!

[strokyl]

https://github.com/linagora/angular-clockpicker, it's available on bower under the name angular-clockpicker