Angular 1.5 datetimepicker component

datepicker.component.js

(function() {
  angular.module('DatepickerModule', [])
})();

(function() {

  'use strict';
  /** 
   * This component is my alternative to the directive wrapper approach, and makes use of 
   * component's onUpdate method to pass in a callback to the parent component.
   * It'll take any configuration options supported by Eonasdan's jQuery datetimepicker plugin 
   * (https://github.com/Eonasdan/bootstrap-datetimepicker), and a pickerId and dateAddOnId
   * usage in html partial: `<datepicker-component options="{}"></datepicker-component>`
   * 
  /** add to the app */
  angular
    .module('DatepickerModule')
    .controller('DatepickerController', DatepickerController)
    .component('datepickerComponent', datepickerComponent());

  DatepickerController
    .$inject = [
      '$scope',
      '$element',
      '$timeout'
    ];

  /**
   * Controller
   *
   */
  function DatepickerController($scope, $element, $timeout) {
    var vm = this;
    vm.$onInit = onInit;
    vm.dateTime = {};

    function onInit() {
      $timeout(function(){
        angular
          .element('#'+vm.options.pickerId)
          .datetimepicker(vm.options)
          .on('changeDate', function(event) {
            vm.onUpdate({value: new Date(event.date)})
          })
      }, 0, false );
    }
  }

  /**
   * Component
   *
   * @param {Object} $scope
   * @param {Object} $element
   */
  function datepickerComponent(
    $scope,
    $element
  ) {
    return {
      controller: 'DatepickerController',
      template: _template(),
      bindings: {
        options: '<',
        onUpdate: '&'
      }
    }
  }

  function _template() {
    return [
      '<div class="input-group date datepicker"',
      '     id="{{$ctrl.options.pickerId}}"',
      '     aria-describedby="{{$ctrl.options.dateAddonId}}">',
      '  <input type="text" class="form-control h6" style="height: 34px;" />',
      '  <span class="input-group-addon add-on" id="{{$ctrl.options.dateAddonId}}">',
      '    <i class="glyph-icon glyph-icon_calendar" />',
      '  </span>',
      '</div>'
    ].join('')
  }
})();