datetimepickerDirective.js

'use strict';

angular
  .module('datetimepicker', [])

  .provider('datetimepicker', function () {
      var default_options = {};

      this.setOptions = function (options) {
          default_options = options;
      };

      this.$get = function () {
          return {
              getOptions: function () {
                  return default_options;
              }
          };
      };
  })

  .directive('datetimepicker', [
    '$timeout',
    'datetimepicker',
    function ($timeout,
              datetimepicker) {
        var default_options = datetimepicker.getOptions();

        return {
            require: '?ngModel',
            restrict: 'AE',
            scope: {
                datetimepickerOptions: '@'
            },
            link: function ($scope, $element, $attrs, controller) {
                var passed_in_options = $scope.$eval($attrs.datetimepickerOptions);
                var options = jQuery.extend({}, default_options, passed_in_options);

                $element.on('dp.change', function (ev) {
                    $timeout(function () {
                        var dtp = $element.data("DateTimePicker");
                        controller.$setViewValue(dtp.date());
                    });
                });

                function setPickerValue() {
                    var result = null;
                    if (!!controller && !!controller.$viewValue) {
                        result = controller.$viewValue;
                    }
                    var dtp = $element.data("DateTimePicker");
                    dtp.date(result);
                }

                controller.$render = function (value) {
                    setPickerValue();
                };

                $element.datetimepicker(options);

                setPickerValue();
            }
        };
    }
  ]);

I'm getting TypeError: $element.datetimepicker is not a function at line 59,

I do have an $element var, so angular is finding it on the dom, the function just isn't attached.

Thoughts?

it appears loaded in my index.html

Great solution, why dont you pull request to https://github.com/diosney/angular-bootstrap-datetimepicker-directive?

Thanks! This is the only directive I've found that accepts two-way binding. Works Great!

Thanks for the efforts with this. Perhaps I've misunderstood something but if you change the format to MM/YYYY it displays correctly but the variable contains a full time stamp. My testing shows, for instance, when I set the picker to August 2016 the display shows 08/2016 correctly but the ng-model value contains 2016-07-31T23:00:00.000Z" which does not match the picked value.

Have attempted to fix myself but being a bit of an Anuglar newb I'm struggling. If anyone has any thoughts they'd be greatly received!

Got it. I think...

CHANGE:
controller.$setViewValue(dtp.date());
To:
controller.$setViewValue(dtp.date().format(options.format));

Thanks! Works Great!