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

[dotku]

I newly donwload and after bower, I got this error~

[fstronin]

I have the problem too. A workaround is you should load jquery before angular.

[schakko]

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();
        }
      };
    }
  ]);

[lgarest]

Any update on this? the workaround is not working for me, it is mandatory to load bootstrap.min.css?

[Lilipi]

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