feat(pfBootstrapDatePicker): Initial Implementation

Gruntfile.js

@@ -453,6 +453,11 @@ module.exports = function (grunt) {
           cwd: 'src/',
           src: ['pagination/**/*.html'],
           dest: 'templates/pagination.js'
+        },
+        'patternfly.datepicker' : {
+          cwd: 'src/',
+          src: ['datepicker/**/*.html'],
+          dest: 'templates/datepicker.js'
         }
       },
       // ng-annotate tries to make the code safe for minification automatically

misc/ng-docs.css

@@ -375,4 +375,7 @@ ul.events > li > h3 {
   background-color: #cc0000;
 }
 
+.type-hint-date {
+  background:#582fc0;
+}
 

src/datepicker/bootstrap-datepicker.component.js

@@ -0,0 +1,38 @@
+angular.module('patternfly.datepicker').component('pfBootstrapDatepicker', {
+  bindings: {
+    date: '<',
+    format: '@?',
+    dateOptions: '<?',
+    isOpen: '<?',
+    popupPlacement: '@?'
+  },
+  templateUrl: 'datepicker/datepicker.html',
+  controller: function () {
+    'use strict';
+
+    var ctrl = this;
+
+    ctrl.defaultDateOptions = {
+      showWeeks : false,
+      formatDay : "d"
+    };
+    ctrl.defaultIsOpen = false;
+
+    ctrl.$onInit = function () {
+      ctrl.format = "MM/dd/yyyy";
+      ctrl.showButtonBar = true;
+      ctrl.popupPlacement = "auto bottom-left";
+
+      if (angular.isUndefined(ctrl.dateOptions)) {
+        ctrl.dateOptions = {};
+      }
+      _.defaults(ctrl.dateOptions, ctrl.defaultDateOptions);
+      _.defaults(ctrl.isOpen, ctrl.defaultIsOpen);
+    };
+
+    ctrl.$onChanges = function (changes) {
+      _.defaults(ctrl.isOpen, ctrl.defaultIsOpen);
+    };
+
+  }
+});

src/datepicker/datepicker.html

@@ -0,0 +1,14 @@
+<p class="input-group">
+  <input type="text" class="form-control datepicker"
+         ng-model="$ctrl.date"
+         uib-datepicker-popup="{{$ctrl.format}}"
+         datepicker-options="$ctrl.dateOptions"
+         is-open="$ctrl.isOpen"
+         ng-required="true"
+         close-text="Close"
+         show-button-bar="$ctrl.showButtonBar"
+         popup-placement="{{$ctrl.popupPlacement}}"/>
+  <span class="input-group-btn">
+    <button type="button" class="btn btn-default datepicker" ng-click="$ctrl.isOpen = !$ctrl.isOpen"><i class="glyphicon glyphicon-calendar"></i></button>
+  </span>
+</p>

src/datepicker/datepicker.less

@@ -0,0 +1,120 @@
+.uib-datepicker-popup {
+  padding: 4px;
+
+  *:focus {
+    outline: none;
+  }
+
+  button {
+    background: @color-pf-white;
+    border: none;
+    box-shadow: none;
+  }
+
+  th {
+    height: 30px;
+  }
+
+  .uib-title {
+    font-size: 14px;
+    font-weight: 500;
+    padding: 5px;
+
+    strong {
+      font-weight: normal;
+    }
+  }
+
+  .uib-left {
+    height: 30px;
+
+    .glyphicon {
+      display: none;
+    }
+
+    &::before {
+      content: "\00AB";
+    }
+  }
+
+  .uib-right {
+    height: 30px;
+
+    .glyphicon {
+      display: none;
+    }
+
+    &::before {
+      content: "\00BB";
+    }
+  }
+
+  .uib-day {
+
+    button.btn.btn-default {
+      height: 30px;
+      width: 30px;
+
+      &:hover {
+        background: @color-pf-blue-50;
+      }
+
+      &.active {
+        background: @color-pf-blue-400;
+        border-color: @color-pf-blue-600;
+        color: @color-pf-white;
+        box-shadow: none;
+        padding: 0;
+
+        .text-info { // this is today's date
+          color: @color-pf-white;
+        }
+      }
+
+      &:not(.active){
+        .text-info { // this is today's date
+          color: @color-pf-black-800;
+          background: @color-pf-gold-200;
+          height: 30px;
+          width: 30px;
+          padding: 7px;
+          display: inline-block;
+          margin: -1px -7px -2px -7px;
+
+          &:hover {
+            background: @color-pf-blue-50;
+          }
+        }
+      }
+    }
+
+  }
+
+  .uib-button-bar {
+    padding: 0;
+
+    .btn-group {
+      width: 100%;
+
+      .uib-clear {
+        display: none;
+      }
+
+      .uib-datepicker-current {
+        color: @color-pf-black;
+        width: 100%;
+        font-size: 14px;
+        font-weight: 500;
+        height: 30px;
+
+        &:hover {
+          background: @color-pf-blue-50;
+        }
+      }
+    }
+
+    .uib-close {
+      display: none;
+    }
+  }
+}

src/datepicker/datepicker.module.js

@@ -0,0 +1,9 @@
+/**
+ * @name  patternfly datepicker
+ *
+ * @description
+ *   Datepicker module for patternfly.
+ *
+ */
+angular.module('patternfly.datepicker', ['ui.bootstrap']);
+

src/datepicker/examples/bootstrap.datepicker.js

@@ -0,0 +1,50 @@
+/**
+ * @ngdoc directive
+ * @name patternfly.datepicker.componenet:pfBootstrapDatepicker
+ * @element pf-bootstrap-datepicker
+ *
+ * @param {date} date Must be a Javascript Date - to be displayed in the input. Can be left empty.
+ * @param {string} format Optional date format for displayed dates ('MM/dd/yyyy' by default).
+ * @param {boolean} isOpen Optional boolean for determining whether or not to have the datepicker default to open (false by default).
+ * @param {string} popupPlacement Optional configuration string used to position the popup datepicker relative to the input element. See {@link https://angular-ui.github.io/bootstrap/#datepickerPopup Angular UI Datepicker Popup}.
+ * @param {object} dateOptions Optional uib-datepicker configuration object. See {@link https://angular-ui.github.io/bootstrap/#datepicker Angular UI Datepicker}.
+ *
+ * @description
+ * A wrapper for the Angular UI {@link http://angular-ui.github.io/bootstrap/#!#datepickerPopup datepicker}.
+ *
+ * @example
+ <example module="patternfly.datepicker">
+
+   <file name="index.html">
+      <div ng-controller="DemoBootstrapDatepicker">
+          <pf-bootstrap-datepicker
+                   date="date">
+          </pf-bootstrap-datepicker>
+          <pf-bootstrap-datepicker
+                   date=""
+                   format="{{format1}}"
+                   is-open="isOpen"
+                   popup-placement="{{popupPlacement}}"
+                   date-options="dateOptions">
+          </pf-bootstrap-datepicker>
+      </div>
+   </file>
+
+   <file name="script.js">
+   angular.module('patternfly.datepicker').controller('DemoBootstrapDatepicker', function( $scope ) {
+
+      // first datepicker
+      $scope.date = new Date("Jan 1, 2000");
+
+      // second datepicker
+      $scope.format1 = "MM/dd/yy";
+      $scope.dateOptions = {
+        showWeeks : true
+      };
+      $scope.isOpen = true;
+      $scope.popupPlacement = "bottom-left";
+   });
+   </file>
+
+   </example>
+ */

src/patternfly.module.js

@@ -7,6 +7,7 @@
 angular.module('patternfly', [
   'patternfly.autofocus',
   'patternfly.card',
+  'patternfly.datepicker',
   'patternfly.filters',
   'patternfly.form',
   'patternfly.modals',

styles/angular-patternfly.less

@@ -14,4 +14,5 @@
 @import "../src/canvas-view/canvas/canvas.less";
 @import "../src/canvas-view/canvas-editor/canvas-editor.less";
 @import "../src/pagination/pagination.less";
+@import "../src/datepicker/datepicker.less";
 

test/datepicker/bootstrap-datepicker.spec.js

@@ -0,0 +1,78 @@
+describe('Component:  pfBootstrapDatepicker', function () {
+  var $scope;
+  var $compile;
+  var element;
+
+  // load the controller's module
+  beforeEach(function () {
+    module('patternfly.datepicker', 'datepicker/datepicker.html');
+  });
+
+  beforeEach(inject(function (_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    $scope = _$rootScope_;
+  }));
+
+  var compileHTML = function (markup, scope) {
+    element = angular.element(markup);
+    $compile(element)(scope);
+
+    scope.$digest();
+  };
+
+  beforeEach(function () {
+    $scope.date = new Date("Jan 1, 2000");
+    $scope.format = "MMM dd, yyyy";
+    $scope.dateOptions = {
+      showWeeks : true
+    };
+
+    var htmlTmp = '<pf-bootstrap-datepicker date="date" format="{{format}}"></pf-bootstrap-datepicker>';
+
+    compileHTML(htmlTmp, $scope);
+  });
+
+  it('should display the date in the correct format', function () {
+    var input = element.find('input.datepicker')[0];
+    expect(input.value).toBe("Jan 01, 2000");
+  });
+
+  it('should open datepicker when button clicked', function () {
+    var button = element.find('button.datepicker')[0],
+      datepicker;
+
+    datepicker = element.find('ul.uib-datepicker-popup');
+    expect(datepicker.length).toBe(0);
+
+    eventFire(button, 'click');
+
+    datepicker = element.find('ul.uib-datepicker-popup');
+    expect(datepicker.length).toBe(1);
+  });
+
+  it('should not display week numbers by default on datepicker', function () {
+    var button = element.find('button.datepicker')[0],
+      week;
+
+    eventFire(button, 'click');
+    week = $(element.find('.uib-weeks')[0]);
+    expect($("td", week).length).toBe(7);
+
+  });
+
+  it('should display week numbers if dateOptions is modified', function () {
+
+    // rebuild the element with the dateOptions included
+    var htmlTmp = '<pf-bootstrap-datepicker date="date" format="{{format}}" date-options="dateOptions"></pf-bootstrap-datepicker>';
+    compileHTML(htmlTmp, $scope);
+
+    // check each uib-weeks row in the datepicker has the week number + the seven days
+    var button = element.find('button.datepicker')[0],
+      week;
+    eventFire(button, 'click');
+    week = $(element.find('.uib-weeks')[0]);
+    expect($("td", week).length).toBe(8);
+
+  });
+
+});