{"id":11992,"date":"2025-02-10T05:05:23","date_gmt":"2025-02-10T05:05:23","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=11992"},"modified":"2025-02-10T05:05:23","modified_gmt":"2025-02-10T05:05:23","slug":"wrap-datetimepicker-js-into-angularjs-directive","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/angular\/wrap-datetimepicker-js-into-angularjs-directive","title":{"rendered":"How to Wrap the Datetimepicker JS into AngularJS Directive"},"content":{"rendered":"

The user aims to incorporate datetimepicker.js, a jQuery plugin, into an AngularJS application by developing a custom directive. The primary obstacle is that the datetimepicker does not seamlessly bind to AngularJS’s ng-model, which disrupts the two-way data binding mechanism. As a result, there are inconsistencies between the Angular model and the date chosen through the datetimepicker.<\/p>\n

Problem Overview<\/h2>\n
    \n
  1. 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.<\/li>\n
  2. 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.<\/li>\n
  3. When used it in modal dialog, it’s value is not cleared when the modal window is popup in the next time.<\/li>\n<\/ol>\n

    Here in example we have Eonasdan\/bootstrap-datetimepicker<\/p>\n

    The Eonasdan\/bootstrap-datetimepicker<\/strong> library is a jQuery-based datetime picker and does not natively support Angular. To integrate it with Angular, you would need to use a wrapper or directive that bridges the gap between jQuery and Angular.<\/p>\n

    So here we have given solution for all angular versions<\/p>\n

    Angular JS<\/h2>\n

    Directive<\/h3>\n
    \r\napp.directive('datetimepicker', function() {\r\n    return {\r\n        restrict: 'A',\r\n        require: 'ngModel',\r\n        link: function(scope, element, attrs, ngModelCtrl) {\r\n            console.log('call datetimepicker link...');\r\n            var picker = element.datetimepicker({\r\n                dateFormat: 'dd\/MM\/yyyy hh:mm:ss',\r\n                useCurrent: false \/\/ Prevent default date setting on initialization\r\n            });\r\n\r\n            \/\/ Model -> View (render)\r\n            ngModelCtrl.$render = function() {\r\n                console.log('ngModelCtrl.$viewValue@' + ngModelCtrl.$viewValue);\r\n                picker.setDate(ngModelCtrl.$viewValue || '');\r\n            };\r\n\r\n            \/\/ View -> Model (change event)\r\n            picker.on('dp.change', function(e) {\r\n                console.log('dp.change ' + e.date);              \r\n                scope.$apply(function(){\r\n                    \/\/ Store Date object in the model\r\n                    ngModelCtrl.$setViewValue(e.date ? e.date.toISOString() : null); \/\/ Using ISO string format\r\n                });\r\n            });\r\n\r\n            \/\/ Optional: Clear date when modal is opened again\r\n            scope.$on('modalOpened', function() {\r\n                ngModelCtrl.$setViewValue(null); \/\/ Reset the date on modal open\r\n                picker.clear();\r\n            });\r\n\r\n            \/\/ Optional: Listen for modal closing event and clear date if needed\r\n            scope.$on('modalClosed', function() {\r\n                picker.clear();\r\n            });\r\n        }\r\n    };\r\n});\r\n<\/pre>\n
    Html<\/h3>\n
    \r\n
    \r\n      
    Datetime Picker Example<\/h2>\r\n      
    \r\n        \r\n          
    \r\n            
    \r\n              \r\n              \r\n                <\/span>\r\n              <\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/form>\r\n      <\/form>\r\n    <\/div>\r\n\r\nController\r\n\r\napp.controller('MainCtrl', [\r\n        '$scope',\r\n        function ($scope) {\r\n          $scope.dueDate = new Date();\r\n        },\r\n      ]);\r\n\r\n<\/pre>\n
    For Angular 2+ versions <\/em>, need to install packages using below command
    \nnpm install jquery moment eonasdan-bootstrap-datetimepicker<\/strong><\/p>\n
    Need to add styles and scripts in angular.json file<\/p>\n
    \r\n\"styles\": [\r\n  \"node_modules\/bootstrap\/dist\/css\/bootstrap.min.css\",\r\n  \"node_modules\/eonasdan-bootstrap-datetimepicker\/build\/css\/bootstrap-datetimepicker.min.css\"\r\n],\r\n\"scripts\": [\r\n  \"node_modules\/jquery\/dist\/jquery.min.js\",\r\n  \"node_modules\/moment\/min\/moment.min.js\",\r\n  \"node_modules\/eonasdan-bootstrap-datetimepicker\/build\/js\/bootstrap-datetimepicker.min.js\"\r\n]\r\n<\/pre>\n
    Angular 18<\/h2>\n
    datetime-picker.directive.ts<\/strong><\/p>\n
    \r\nimport $ from 'jquery';\r\nimport { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular\/core';\r\nimport 'eonasdan-bootstrap-datetimepicker';\r\n\r\n@Directive({\r\n  selector: '[appDatetimepicker]',\r\n  standalone: true\r\n})\r\nexport class DatetimepickerDirective implements OnInit, OnDestroy {\r\n  @Input() options: any;\r\n  @Output() dateChange = new EventEmitter();\r\n\r\n  private picker: any;\r\n  constructor(private el: ElementRef) {}\r\n  ngOnInit(): void {\r\n    \/\/ Use type assertion to avoid TypeScript error\r\n    this.picker = ($(this.el.nativeElement)).datetimepicker(this.options);\r\n\r\n    this.picker.on('dp.change', (e: any) => {\r\n      this.dateChange.emit(e.date ? e.date.format('YYYY-MM-DD HH:mm') : '');\r\n    });\r\n  }\r\n  ngOnDestroy(): void {\r\n    if (this.picker) {\r\n      (this.picker.data('DateTimePicker')).destroy();\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
    App.component.html<\/strong><\/p>\n
    \r\n
    \r\n