How to wrap the datetimepicker js into AngularJS directive

angularjs, javascript, twitter-bootstrap

Solution

I had the same issue. Here's what I ended up doing that worked well for me:

'use strict';

angular.module('frontStreetApp.directives')
    .directive('psDatetimePicker', function (moment) {
        var format = 'MM/DD/YYYY hh:mm A';

        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attributes, ctrl) {
                element.datetimepicker({
                    format: format
                });
                var picker = element.data("DateTimePicker");

                ctrl.$formatters.push(function (value) {
                    var date = moment(value);
                    if (date.isValid()) {
                        return date.format(format);
                    }
                    return '';
                });

                element.on('change', function (event) {
                    scope.$apply(function() {
                        var date = picker.getDate();
                        ctrl.$setViewValue(date.valueOf());
                    });
                });
            }
        };
    });

Here's the HTML:

<!-- The dueDate field is a UNIX offset of the date -->
<input type="text"
       ng-model="dueDate"
       ps-datetime-picker
       class="form-control">

You can check out the gists and a bit more information in my blog post.

Problem

I have spent sometime on researching the existing datetime directives of angularjs. Both ngularUI and AngularStrap do not provide a datetimepicker as I needed. Of course, I know use a datepicker and timepicker together to archive the purpose. I have searched the related topic from internet and stackoverflow. Found some interesting and helpful info. http://dalelotts.github.io/angular-bootstrap-datetimepicker/, there is a datetimepicker, but I dislike the usage of this directive. connecting datetimepicker to angularjs , this topic is very helpful, I tried to wrap my datetimepicker directive following the steps. My work is based on https://github.com/Eonasdan/bootstrap-datetimepicker, a bootstrap 3 based datetimepicker, the UI is very nice. ``` app.directive('datetimepicker', function() { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ngModelCtrl) { console.log('call datetimepicker link...'); var picker = element.datetimepicker({ dateFormat: 'dd/MM/yyyy hh:mm:ss' }); //ngModelCtrl.$setViewValue(picker.getDate()); //model->view ngModelCtrl.$render(function() { console.log('ngModelCtrl.$viewValue@'+ngModelCtrl.$viewValue); picker.setDate(ngModelCtrl.$viewValue || ''); }); //view->model picker.on('dp.change', function(e) { console.log('dp.change'+e.date); scope.$apply(function(){ ngModelCtrl.$setViewValue(e.date); }); }); } }; }); ``` And use it in my view. ``` <div class="col-md-6"> <div class="input-group date" id="endTime" data-datetimepicker ng-model="stat.endTime" data-date-format="MM/DD/YYYY hh:mm A/PM" > <input class="form-control" type="text" placeholder="End"/> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> ``` There are some problems I found. - If the date is set via json before rendered in view, the initial date did not display, I can not see any log of the execution of ngModel render method. - When I picked a date, it got a string based datetime to the json data, not a long format. And in other related fragment in the view, the string based date can not parsed by angular date filter. - When used it in modal dialog, it's value is not cleared when the modal window is popup in the next time. Thanks in advance.

Original source

Related problems