$element.on(...).datetimepicker is not a function #23

Activity

1. fstronin commented on Dec 20, 2015

   

   fstronin

   on Dec 20, 2015

   More actions

   I have the problem too.
   A workaround is you should load jquery before angular.
2. schakko commented on Jan 15, 2016

   

   schakko

   on Jan 15, 2016

   More actions

   Quickfix: wrap the $element usage in the datetimepicker directive with jQuery's $(...) function:

     .directive('datetimepicker', [
       '$timeout',
       'datetimepicker',
       function ($timeout,
                 datetimepicker) {
   
         var default_options = datetimepicker.getOptions();
   
         return {
           require : '?ngModel',
           restrict: 'AE',
           scope   : {
             datetimepickerOptions: '@'
           },
           link    : function ($scope, $element, $attrs, ngModelCtrl) {
             var passed_in_options = $scope.$eval($attrs.datetimepickerOptions);
             var options = jQuery.extend({}, default_options, passed_in_options);
   
   
             // @schakko: fix #23 https://github.com/diosney/angular-bootstrap-datetimepicker-directive/issues/23 
             $($element)
               .on('dp.change', function (e) {
                 if (ngModelCtrl) {
                   $timeout(function () {
                     ngModelCtrl.$setViewValue(e.target.value);
                   });
                 }
               })
               .datetimepicker(options);
   
             function setPickerValue() {
               var date = null;
   
               if (ngModelCtrl && ngModelCtrl.$viewValue) {
                 date = ngModelCtrl.$viewValue;
               }
   
               // @schakko: fix #23 https://github.com/diosney/angular-bootstrap-datetimepicker-directive/issues/23 
               $($element)
                 .data('DateTimePicker')
                 .date(date);
             }
   
             if (ngModelCtrl) {
               ngModelCtrl.$render = function () {
                 setPickerValue();
               };
             }
   
             setPickerValue();
           }
         };
       }
     ]);
   

   👍React with 👍1Reacted by Lilipi
3. lgarest commented on Jun 3, 2016

   

   lgarest

   on Jun 3, 2016

   More actions

   Any update on this? the workaround is not working for me, it is mandatory to load bootstrap.min.css?
4. Lilipi commented on Nov 13, 2018

   

   Lilipi

   on Nov 13, 2018

   More actions

   @schakko thanks for your fix !! It works well !

   ❤️React with ❤️1Reacted by Schakko