add datetimepicker

Author: yaacov

Gruntfile.js

@@ -128,6 +128,8 @@ module.exports = function (grunt) {
             'lib/bootstrap/dist/js/bootstrap.js',
             'lib/bootstrap-combobox/js/bootstrap-combobox.js',
             'lib/bootstrap-datepicker/dist/js/bootstrap-datepicker.js',
+            'lib/moment/moment.js',
+            'lib/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js',
             'lib/bootstrap-select/js/bootstrap-select.js',
             'lib/patternfly-bootstrap-treeview/src/js/bootstrap-treeview.js',
             'lib/c3/c3.js',

package.json

@@ -40,7 +40,7 @@
     "karma-jasmine": "0.2.2",
     "karma-junit-reporter": "0.2.2",
     "karma-ng-html2js-preprocessor": "~0.1",
-    "karma-phantomjs-launcher": "0.1.4",
+    "karma-phantomjs-launcher": "^1.0.0",
     "matchdep": "0.3.0"
   },
   "scripts": {

src/form/datetimepicker/datetimepicker.directive.js

@@ -0,0 +1,57 @@
+/**
+ * @ngdoc directive
+ * @name patternfly.form.directive:pfDateTimepicker
+ *
+ * @description
+ *  Angular directive to wrap the bootstrap datetimepicker http://eonasdan.github.io/bootstrap-datetimepicker/
+ *
+ * @param {object} date date and time moment object
+ * @param {string} options the configuration options for the date picker
+ *
+ * @example
+ <example module="patternfly.form">
+   <file name="index.html">
+     <form class="form" ng-controller="FormDemoCtrl">
+       <span>Date and Time: <span ng-bind="date"></span></span>
+       <div pf-date-timepicker options="options" date="date"></div>
+     </form>
+   </file>
+
+   <file name="script.js">
+     angular.module( 'patternfly.form' ).controller( 'FormDemoCtrl', function( $scope ) {
+       $scope.options = {
+         format: 'HH:mm'
+       };
+       $scope.date = moment();
+     });
+   </file>
+ </example>
+ */
+angular.module('patternfly.form').directive('pfDateTimepicker', function () {
+  'use strict';
+
+  return {
+    replace: true,
+    restrict: 'A',
+    require: '^form',
+    templateUrl: 'form/datetimepicker/datetimepicker.html',
+    scope: {
+      options: '=',
+      date: '='
+    },
+    link: function ($scope, element) {
+      //Make sure the date picker is set with the correct options
+      element.datetimepicker($scope.options);
+
+      //Set the initial value of the date picker
+      element.datetimepicker('date', $scope.date || null);
+
+      //Change happened on the date picker side. Update the underlying date model
+      element.on('dp.change', function (elem) {
+        $scope.$apply(function () {
+          $scope.date = elem.date;
+        });
+      });
+    }
+  };
+});

src/form/datetimepicker/datetimepicker.html

@@ -0,0 +1,6 @@
+<div class="input-group time-picker-pf">
+  <input type="text" class="form-control"/>
+  <span class="input-group-addon btn btn-default">
+    <span class="fa fa-clock-o"></span>
+  </span>
+</div>

test/form/datetimepicker/datetimepicker.directive.spec.js

@@ -0,0 +1,38 @@
+describe('Directive: pfDateTimepicker', function() {
+  var $scope, $compile, $timeout, element, datepicker, dateInput, dateElement;
+
+  beforeEach(module('patternfly.form', 'form/datetimepicker/datetimepicker.html'));
+
+  beforeEach(inject(function(_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    $scope = _$rootScope_;
+  }));
+
+  var compileDateTimepicker = function(markup, $scope) {
+    var el = $compile(markup)($scope);
+    $scope.$apply();
+    return el;
+  };
+
+  it("should set the date and time picker input", function() {
+    $scope.options = {format: 'HH:mm'};
+    $scope.date = moment("2016-01-01 11:31:23");
+
+    datepicker = compileDateTimepicker('<form><div pf-date-timepicker options="options" date="date"></div></form>', $scope);
+    dateInput = angular.element(datepicker).find('input');
+
+    expect(dateInput.val()).toBe('11:31');
+  });
+
+  it("should set the angular model", function() {
+    $scope.options = {format: 'HH:mm'};
+
+    datepicker = compileDateTimepicker('<form><div pf-date-timepicker options="options" date="date"></div></form>', $scope);
+    dateInput = angular.element(datepicker).find('input');
+    dateElement = angular.element(datepicker).find('div');
+    dateElement.datetimepicker('date', moment("2016-01-01 11:31:23"));
+
+    expect(dateInput.val()).toBe('11:31');
+  });
+
+});

test/karma.conf.js

@@ -10,6 +10,8 @@ module.exports = function(config) {
     files: [
       'lib/jquery/dist/jquery.js',
       'lib/bootstrap-datepicker/dist/js/bootstrap-datepicker.js',
+      'lib/moment/moment.js',
+      'lib/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js',
       'lib/bootstrap-select/js/bootstrap-select.js',
       'lib/d3/d3.js',
       'lib/c3/c3.js',