feat(datepicker): floating calendar panel for date picker.

Author: jelbourn

src/components/calendar/dateLocaleProvider.js

@@ -77,6 +77,7 @@
 
       window.$locale = $locale;
 
+      // TODO(jelbourn): Freeze this object.
       return {
         months: this.months || $locale.DATETIME_FORMATS.MONTH,
         shortMonths: this.shortMonths || $locale.DATETIME_FORMATS.SHORTMONTH,

src/components/calendar/datePicker.js

@@ -12,35 +12,58 @@
   function datePickerDirective() {
     return {
       template:
-        '<div class="md-date-picker">' +
-          '<input> <br>' +
-          '<md-calendar ng-model="ctrl.date"></md-calendar>' +
-        '</div>',
+          '<input><button type="button" ng-click="ctrl.openCalendarPane()">📅</button>' +
+          '<div class="md-date-calendar-pane">' +
+            '<md-calendar ng-model="ctrl.date" ng-if="ctrl.isCalendarOpen"></md-calendar>' +
+          '</div>',
+      // <md-calendar ng-model="ctrl.date"></md-calendar>
       require: ['ngModel', 'mdDatePicker'],
       scope: {},
       controller: DatePickerCtrl,
       controllerAs: 'ctrl',
       link: function(scope, element, attr, controllers) {
         var ngModelCtrl = controllers[0];
         var mdDatePickerCtrl = controllers[1];
+
         mdDatePickerCtrl.configureNgModel(ngModelCtrl);
       }
     };
   }
 
-  function DatePickerCtrl($scope, $element, $$mdDateLocale, $$mdDateUtil) {
+  /**
+   * Controller for md-date-picker.
+   *
+   * @ngInject @constructor
+   */
+  function DatePickerCtrl($scope, $element, $compile, $timeout, $mdConstant, $mdUtil,
+      $$mdDateLocale, $$mdDateUtil) {
+    /** @final */
+    this.$compile = $compile;
+
+    /** @final */
+    this.$timeout = $timeout;
+
     /** @final */
     this.dateLocale = $$mdDateLocale;
 
     /** @final */
     this.dateUtil = $$mdDateUtil;
 
+    /** @final */
+    this.$mdConstant = $mdConstant;
+
+    /* @final */
+    this.$mdUtil = $mdUtil;
+
     /** @type {!angular.NgModelController} */
     this.ngModelCtrl = null;
 
     /** @type {HTMLInputElement} */
     this.inputElement = $element[0].querySelector('input');
 
+    /** @type {HTMLElement} Floating calendar pane (instantiated lazily) */
+    this.calendarPane = $element[0].querySelector('.md-date-calendar-pane');
+
     /** @type {Date} */
     this.date = null;
 
@@ -50,7 +73,19 @@
     /** @final {!angular.Scope} */
     this.$scope = $scope;
 
+    /** @type {boolean} Whether the date-picker's calendar pane is open. */
+    this.isCalendarOpen = false;
+
+    /** Pre-bound click handler is saved so that the event listener can be removed. */
+    this.bodyClickHandler = this.handleBodyClick.bind(this);
+
     this.attachChangeListeners();
+    this.attachInterationListeners();
+
+    var self = this;
+    $scope.$on('$destroy', function() {
+      self.detachCalendarPane();
+    });
   }
 
   /**
@@ -78,6 +113,7 @@
     self.$scope.$on('md-calendar-change', function(event, date) {
       self.ngModelCtrl.$setViewValue(date);
       self.inputElement.value = self.dateLocale.formatDate(date);
+      self.closeCalendarPane();
     });
 
     // TODO(jelbourn): debounce
@@ -89,4 +125,92 @@
       }
     });
   };
+
+  /** Attach event listeners for user interaction. */
+  DatePickerCtrl.prototype.attachInterationListeners = function() {
+    var self = this;
+    var $scope = this.$scope;
+    var keyCodes = this.$mdConstant.KEY_CODE;
+
+    self.inputElement.addEventListener('keydown', function(event) {
+      $scope.$apply(function() {
+        if (event.altKey && event.keyCode == keyCodes.DOWN_ARROW) {
+          self.openCalendarPane();
+        }
+      });
+    });
+
+    self.$scope.$on('md-calendar-escape', function() {
+      self.closeCalendarPane();
+    });
+  };
+
+  /** Position and attach the floating calendar to the document. */
+  DatePickerCtrl.prototype.attachCalendarPane = function() {
+    var elementRect = this.$element[0].getBoundingClientRect();
+
+    this.calendarPane.style.left = elementRect.left + 'px';
+    this.calendarPane.style.top = elementRect.bottom + 'px';
+    document.body.appendChild(this.calendarPane);
+  };
+
+  /** Detach the floating calendar pane from the document. */
+  DatePickerCtrl.prototype.detachCalendarPane = function() {
+    // Use native DOM removal because we do not want any of the angular state of this element
+    // to be disposed.
+    this.calendarPane.parentNode.removeChild(this.calendarPane);
+  };
+
+  /** Open the floating calendar pane. */
+  DatePickerCtrl.prototype.openCalendarPane = function() {
+    if (!this.isCalendarOpen) {
+      this.isCalendarOpen = true;
+      this.attachCalendarPane();
+      // TODO(jelbourn): dispatch to tell other date pickers to close.
+      this.focusCalendar();
+
+      // Attach click listener inside of a timeout because, if this open call was triggered by a
+      // click, we don't want it to be immediately propogated up to the body and handled.
+      var self = this;
+      this.$timeout(function() {
+        document.body.addEventListener('click', self.bodyClickHandler);
+      }, 0, false);
+    }
+  };
+
+  /** Close the floating calendar pane. */
+  DatePickerCtrl.prototype.closeCalendarPane = function() {
+    this.isCalendarOpen = false;
+    this.detachCalendarPane();
+    this.inputElement.focus();
+    document.body.removeEventListener('click', this.bodyClickHandler);
+  };
+
+  /** Gets the controller instance for the calendar in the floating pane. */
+  DatePickerCtrl.prototype.getCalendarCtrl = function() {
+    return angular.element(this.calendarPane.querySelector('md-calendar')).controller('mdCalendar');
+  };
+
+  /** Focus the calendar in the floating pane. */
+  DatePickerCtrl.prototype.focusCalendar = function() {
+    // Use a timeout in order to allow the calendar to be rendered, as it is gated behind an ng-if.
+    var self = this;
+    this.$timeout(function() {
+      self.getCalendarCtrl().focus();
+    }, 0, false);
+  };
+
+  /**
+   * Handles a click on the document body when the floating calendar pane is open.
+   * Closes the floating calendar pane if the click is not inside of it.
+   * @param {MouseEvent} event
+   */
+  DatePickerCtrl.prototype.handleBodyClick = function(event) {
+    if (this.isCalendarOpen) {
+      var isInCalendar = this.$mdUtil.getClosest(event.target, 'md-calendar');
+      if (!isInCalendar) {
+        this.closeCalendarPane();
+      }
+    }
+  };
 })();

src/components/calendar/demoDatePicker/index.html

@@ -22,7 +22,6 @@ <h2>Development tools</h2>
     <p>Here is a bunch of stuff after the calendar</p>
     <p>Here is a bunch of stuff after the calendar</p>
     <p>Here is a bunch of stuff after the calendar</p>
-    <input>
 
   </md-content>
 </div>