text: /*!
   * AngularJS Material Design
   * https://github.com/angular/material
   * @license MIT
   * v1.2.1-master-c609385
   */
  (function( window, angular, undefined ){
  "use strict";
  
  /**
   * @ngdoc module
   * @name material.components.datepicker
   * @description Module for the datepicker component.
   */
  
  angular.module('material.components.datepicker', [
    'material.core',
    'material.components.icon',
    'material.components.virtualRepeat'
  ]);
  
  (function() {
    'use strict';
  
    /**
     * @ngdoc directive
     * @name mdCalendar
     * @module material.components.datepicker
     *
     * @param {Date} ng-model The component's model. Should be a Date object.
     * @param {Object=} ng-model-options Allows tuning of the way in which `ng-model` is being
     *  updated. Also allows for a timezone to be specified.
     *  <a href="https://docs.angularjs.org/api/ng/directive/ngModelOptions#usage">Read more at the
     *  ngModelOptions docs.</a>
     * @param {Date=} md-min-date Expression representing the minimum date.
     * @param {Date=} md-max-date Expression representing the maximum date.
     * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a
     *  boolean whether it can be selected in "day" mode or not.
     * @param {(function(Date): boolean)=} md-month-filter Function expecting a date and returning a
     *  boolean whether it can be selected in "month" mode or not.
     * @param {String=} md-current-view Current view of the calendar. Can be either "month" or "year".
     * @param {String=} md-mode Restricts the user to only selecting a value from a particular view.
     *  This option can be used if the user is only supposed to choose from a certain date type
     *  (e.g. only selecting the month). Can be either "month" or "day". **Note** that this will
     *  overwrite the `md-current-view` value.
     *
     * @description
     * `<md-calendar>` is a component that renders a calendar that can be used to select a date.
     * It is a part of the `<md-datepicker>` pane, however it can also be used on it's own.
     *
     * @usage
     *
     * <hljs lang="html">
     *   <md-calendar ng-model="birthday"></md-calendar>
     * </hljs>
     */
    CalendarCtrl['$inject'] = ["$element", "$scope", "$$mdDateUtil", "$mdUtil", "$mdConstant", "$mdTheming", "$$rAF", "$attrs", "$mdDateLocale", "$filter", "$document"];
    calendarDirective['$inject'] = ["inputDirective"];
    angular.module('material.components.datepicker')
      .directive('mdCalendar', calendarDirective);
  
    // TODO(jelbourn): Mac Cmd + left / right == Home / End
    // TODO(jelbourn): Refactor month element creation to use cloneNode (performance).
    // TODO(jelbourn): Define virtual scrolling constants (compactness) users can override.
    // TODO(jelbourn): Animated month transition on ng-model change (virtual-repeat)
    // TODO(jelbourn): Scroll snapping (virtual repeat)
    // TODO(jelbourn): Remove superfluous row from short months (virtual-repeat)
    // TODO(jelbourn): Month headers stick to top when scrolling.
    // TODO(jelbourn): Previous month opacity is lowered when partially scrolled out of view.
    // TODO(jelbourn): Support md-calendar standalone on a page (as a tabstop w/ aria-live
    //     announcement and key handling).
    // TODO Read-only calendar (not just date-picker).
  
    function calendarDirective(inputDirective) {
      return {
        template: function(tElement, tAttr) {
          // This allows the calendar to work, without a datepicker. This ensures that the virtual
          // repeater scrolls to the proper place on load by deferring the execution until the next
          // digest. It's necessary only if the calendar is used without a datepicker, otherwise it's
          // already wrapped in an ngIf.
          var extraAttrs = tAttr.hasOwnProperty('ngIf') ? '' : 'ng-if="calendarCtrl.isInitialized"';
          return '' +
            '<div ng-switch="calendarCtrl.currentView" ' + extraAttrs + '>' +
              '<md-calendar-year ng-switch-when="year"></md-calendar-year>' +
              '<md-calendar-month ng-switch-default></md-calendar-month>' +
            '</div>';
        },
        scope: {
          minDate: '=mdMinDate',
          maxDate: '=mdMaxDate',
          dateFilter: '=mdDateFilter',
          monthFilter: '=mdMonthFilter',
  
          // These need to be prefixed, because Angular resets
          // any changes to the value due to bindToController.
          _mode: '@mdMode',
          _currentView: '@mdCurrentView'
        },
        require: ['ngModel', 'mdCalendar'],
        controller: CalendarCtrl,
        controllerAs: 'calendarCtrl',
        bindToController: true,
        link: function(scope, element, attrs, controllers) {
          var ngModelCtrl = controllers[0];
          var mdCalendarCtrl = controllers[1];
          mdCalendarCtrl.configureNgModel(ngModelCtrl, inputDirective);
        }
      };
    }
  
    /**
     * Occasionally the hideVerticalScrollbar method might read an element's
     * width as 0, because it hasn't been laid out yet. This value will be used
     * as a fallback, in order to prevent scenarios where the element's width
     * would otherwise have been set to 0. This value is the "usual" width of a
     * calendar within a floating calendar pane.
     */
    var FALLBACK_WIDTH = 340;
  
    /** Next identifier for calendar instance. */
    var nextUniqueId = 0;
  
    /** Maps the `md-mode` values to their corresponding calendar views. */
    var MODE_MAP = {
      day: 'month',
      month: 'year'
    };
  
    /**
     * Controller for the mdCalendar component.
     * ngInject @constructor
     */
    function CalendarCtrl($element, $scope, $$mdDateUtil, $mdUtil, $mdConstant, $mdTheming, $$rAF,
                          $attrs, $mdDateLocale, $filter, $document) {
      $mdTheming($element);
  
      /**
       * @final
       * @type {!JQLite}
       */
      this.$element = $element;
  
      /**
       * @final
       * @type {!angular.Scope}
       */
      this.$scope = $scope;
  
      /**
       * @final
       * @type {!angular.$attrs} Current attributes object for the element
       */
      this.$attrs = $attrs;
  
      /** @final */
      this.dateUtil = $$mdDateUtil;
  
      /** @final */
      this.$mdUtil = $mdUtil;
  
      /** @final */
      this.keyCode = $mdConstant.KEY_CODE;
  
      /** @final */
      this.$$rAF = $$rAF;
  
      /** @final */
      this.$mdDateLocale = $mdDateLocale;
  
      /** @final The built-in Angular date filter. */
      this.ngDateFilter = $filter('date');
  
      /**
       * @final
       * @type {Date}
       */
      this.today = this.dateUtil.createDateAtMidnight();
  
      /** @type {!ngModel.NgModelController} */
      this.ngModelCtrl = undefined;
  
      /** @type {string} Class applied to the selected date cell. */
      this.SELECTED_DATE_CLASS = 'md-calendar-selected-date';
  
      /** @type {string} Class applied to the cell for today. */
      this.TODAY_CLASS = 'md-calendar-date-today';
  
      /** @type {string} Class applied to the focused cell. */
      this.FOCUSED_DATE_CLASS = 'md-focus';
  
      /**
       * @final
       * @type {number} Unique ID for this calendar instance.
       */
      this.id = nextUniqueId++;
  
      /**
       * The date that is currently focused or showing in the calendar. This will initially be set
       * to the ng-model value if set, otherwise to today. It will be updated as the user navigates
       * to other months. The cell corresponding to the displayDate does not necessarily always have
       * focus in the document (such as for cases when the user is scrolling the calendar).
       * @type {Date}
       */
      this.displayDate = null;
  
      /**
       * Allows restricting the calendar to only allow selecting a month or a day.
       * @type {'month'|'day'|null}
       */
      this.mode = null;
  
      /**
       * The selected date. Keep track of this separately from the ng-model value so that we
       * can know, when the ng-model value changes, what the previous value was before it's updated
       * in the component's UI.
       *
       * @type {Date}
       */
      this.selectedDate = null;
  
      /**
       * The first date that can be rendered by the calendar. The default is taken
       * from the mdDateLocale provider and is limited by the mdMinDate.
       * @type {Date}
       */
      this.firstRenderableDate = null;
  
      /**
       * The last date that can be rendered by the calendar. The default comes
       * from the mdDateLocale provider and is limited by the maxDate.
       * @type {Date}
       */
      this.lastRenderableDate = null;
  
      /**
       * Used to toggle initialize the root element in the next digest.
       * @type {boolean}
       */
      this.isInitialized = false;
  
      /**
       * Cache for the  width of the element without a scrollbar. Used to hide the scrollbar later on
       * and to avoid extra reflows when switching between views.
       * @type {number}
       */
      this.width = 0;
  
      /**
       * Caches the width of the scrollbar in order to be used when hiding it and to avoid extra reflows.
       * @type {number}
       */
      this.scrollbarWidth = 0;
  
      /**
       * @type {boolean} set to true if the calendar is being used "standalone" (outside of a
       *  md-datepicker).
       */
      this.standaloneMode = false;
  
      // Unless the user specifies so, the calendar should not be a tab stop.
      // This is necessary because ngAria might add a tabindex to anything with an ng-model
      // (based on whether or not the user has turned that particular feature on/off).
      if (!$attrs.tabindex) {
        $element.attr('tabindex', '-1');
      }
  
      var boundKeyHandler = angular.bind(this, this.handleKeyEvent);
  
      // If use the md-calendar directly in the body without datepicker,
      // handleKeyEvent will disable other inputs on the page.
      // So only apply the handleKeyEvent on the body when the md-calendar inside datepicker,
      // otherwise apply on the calendar element only.
  
      var handleKeyElement;
      if ($element.parent().hasClass('md-datepicker-calendar')) {
        handleKeyElement = angular.element($document[0].body);
      } else {
        this.standaloneMode = true;
        handleKeyElement = $element;
      }
  
      // Bind the keydown handler to the body, in order to handle cases where the focused
      // element gets removed from the DOM and stops propagating click events.
      handleKeyElement.on('keydown', boundKeyHandler);
  
      $scope.$on('$destroy', function() {
        handleKeyElement.off('keydown', boundKeyHandler);
      });
  
      // For AngularJS 1.4 and older, where there are no lifecycle hooks but bindings are pre-assigned,
      // manually call the $onInit hook.
      if (angular.version.major === 1 && angular.version.minor <= 4) {
        this.$onInit();
      }
    }
  
    /**
     * AngularJS Lifecycle hook for newer AngularJS versions.
     * Bindings are not guaranteed to have been assigned in the controller, but they are in the
     * $onInit hook.
     */
    CalendarCtrl.prototype.$onInit = function() {
      /**
       * The currently visible calendar view. Note the prefix on the scope value,
       * which is necessary, because the datepicker seems to reset the real one value if the
       * calendar is open, but the `currentView` on the datepicker's scope is empty.
       * @type {String}
       */
      if (this._mode && MODE_MAP.hasOwnProperty(this._mode)) {
        this.currentView = MODE_MAP[this._mode];
        this.mode = this._mode;
      } else {
        this.currentView = this._currentView || 'month';
        this.mode = null;
      }
  
      if (this.minDate && this.minDate > this.$mdDateLocale.firstRenderableDate) {
        this.firstRenderableDate = this.minDate;
      } else {
        this.firstRenderableDate = this.$mdDateLocale.firstRenderableDate;
      }
  
      if (this.maxDate && this.maxDate < this.$mdDateLocale.lastRenderableDate) {
        this.lastRenderableDate = this.maxDate;
      } else {
        this.lastRenderableDate = this.$mdDateLocale.lastRenderableDate;
      }
    };
  
    /**
     * Sets up the controller's reference to ngModelController.
     * @param {!ngModel.NgModelController} ngModelCtrl Instance of the ngModel controller.
     * @param {Object} inputDirective Config for AngularJS's `input` directive.
     */
    CalendarCtrl.prototype.configureNgModel = function(ngModelCtrl, inputDirective) {
      var self = this;
      self.ngModelCtrl = ngModelCtrl;
  
      // The component needs to be [type="date"] in order to be picked up by AngularJS.
      this.$attrs.$set('type', 'date');
  
      // Invoke the `input` directive link function, adding a stub for the element.
      // This allows us to re-use AngularJS' logic for setting the timezone via ng-model-options.
      // It works by calling the link function directly which then adds the proper `$parsers` and
      // `$formatters` to the NgModelController.
      inputDirective[0].link.pre(this.$scope, {
        on: angular.noop,
        val: angular.noop,
        0: {}
      }, this.$attrs, [ngModelCtrl]);
  
      ngModelCtrl.$render = function() {
        var value = this.$viewValue, convertedDate;
  
        // In the case where a conversion is needed, the $viewValue here will be a string like
        // "2020-05-10" instead of a Date object.
        if (!self.dateUtil.isValidDate(value)) {
          convertedDate = self.dateUtil.removeLocalTzAndReparseDate(new Date(value));
          if (self.dateUtil.isValidDate(convertedDate)) {
            value = convertedDate;
          }
        }
  
        // Notify the child scopes of any changes.
        self.$scope.$broadcast('md-calendar-parent-changed', value);
  
        // Set up the selectedDate if it hasn't been already.
        if (!self.selectedDate) {
          self.selectedDate = value;
        }
  
        // Also set up the displayDate.
        if (!self.displayDate) {
          self.displayDate = self.selectedDate || self.today;
        }
      };
  
      self.$mdUtil.nextTick(function() {
        self.isInitialized = true;
      });
    };
  
    /**
     * Sets the ng-model value for the calendar and emits a change event.
     * @param {Date} date new value for the calendar
     */
    CalendarCtrl.prototype.setNgModelValue = function(date) {
      var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone');
      var value = this.dateUtil.createDateAtMidnight(date);
      this.focusDate(value);
      this.$scope.$emit('md-calendar-change', value);
      // Using the timezone when the offset is negative (GMT+X) causes the previous day to be
      // selected here. This check avoids that.
      if (timezone == null || value.getTimezoneOffset() < 0) {
        this.ngModelCtrl.$setViewValue(this.ngDateFilter(value, 'yyyy-MM-dd'), 'default');
      } else {
        this.ngModelCtrl.$setViewValue(this.ngDateFilter(value, 'yyyy-MM-dd', timezone), 'default');
      }
      this.ngModelCtrl.$render();
      return value;
    };
  
    /**
     * Sets the current view that should be visible in the calendar
     * @param {string} newView View name to be set.
     * @param {number|Date} time Date object or a timestamp for the new display date.
     */
    CalendarCtrl.prototype.setCurrentView = function(newView, time) {
      var self = this;
  
      self.$mdUtil.nextTick(function() {
        self.currentView = newView;
  
        if (time) {
          self.displayDate = angular.isDate(time) ? time : new Date(time);
        }
      });
    };
  
    /**
     * Focus the cell corresponding to the given date.
     * @param {Date=} date The date to be focused.
     */
    CalendarCtrl.prototype.focusDate = function(date) {
      if (this.dateUtil.isValidDate(date)) {
        var previousFocus = this.$element[0].querySelector('.' + this.FOCUSED_DATE_CLASS);
        if (previousFocus) {
          previousFocus.classList.remove(this.FOCUSED_DATE_CLASS);
        }
  
        var cellId = this.getDateId(date, this.currentView);
        var cell = document.getElementById(cellId);
        if (cell) {
          cell.classList.add(this.FOCUSED_DATE_CLASS);
          cell.focus();
          this.displayDate = date;
        }
      } else {
        var rootElement = this.$element[0].querySelector('[ng-switch]');
  
        if (rootElement) {
          rootElement.focus();
        }
      }
    };
  
    /**
     * Highlights a date cell on the calendar and changes the selected date.
     * @param {Date=} date Date to be marked as selected.
     */
    CalendarCtrl.prototype.changeSelectedDate = function(date) {
      var selectedDateClass = this.SELECTED_DATE_CLASS;
      var prevDateCell = this.$element[0].querySelector('.' + selectedDateClass);
  
      // Remove the selected class from the previously selected date, if any.
      if (prevDateCell) {
        prevDateCell.classList.remove(selectedDateClass);
        prevDateCell.setAttribute('aria-selected', 'false');
      }
  
      // Apply the select class to the new selected date if it is set.
      if (date) {
        var dateCell = document.getElementById(this.getDateId(date, this.currentView));
        if (dateCell) {
          dateCell.classList.add(selectedDateClass);
          dateCell.setAttribute('aria-selected', 'true');
        }
      }
  
      this.selectedDate = date;
    };
  
    /**
     * Normalizes the key event into an action name. The action will be broadcast
     * to the child controllers.
     * @param {KeyboardEvent} event
     * @returns {string} The action that should be taken, or null if the key
     *  does not match a calendar shortcut.
     */
    CalendarCtrl.prototype.getActionFromKeyEvent = function(event) {
      var keyCode = this.keyCode;
  
      switch (event.which) {
        case keyCode.ENTER: return 'select';
  
        case keyCode.RIGHT_ARROW: return 'move-right';
        case keyCode.LEFT_ARROW: return 'move-left';
  
        case keyCode.DOWN_ARROW: return event.metaKey ? 'move-page-down' : 'move-row-down';
        case keyCode.UP_ARROW: return event.metaKey ? 'move-page-up' : 'move-row-up';
  
        case keyCode.PAGE_DOWN: return 'move-page-down';
        case keyCode.PAGE_UP: return 'move-page-up';
  
        case keyCode.HOME: return 'start';
        case keyCode.END: return 'end';
  
        default: return null;
      }
    };
  
    /**
     * Handles a key event in the calendar with the appropriate action.
     * The action will either
     *  - select the focused date
     *  - navigate to focus a new date
     *  - emit a md-calendar-close event if in a md-datepicker panel
     *  - emit a md-calendar-parent-action
     *  - delegate to normal tab order if the TAB key is pressed in standalone mode
     * @param {KeyboardEvent} event
     */
    CalendarCtrl.prototype.handleKeyEvent = function(event) {
      var self = this;
  
      this.$scope.$apply(function() {
        // Capture escape and emit back up so that a wrapping component
        // (such as a date-picker) can decide to close.
        if (event.which === self.keyCode.ESCAPE ||
            (event.which === self.keyCode.TAB && !self.standaloneMode)) {
          self.$scope.$emit('md-calendar-close');
  
          if (event.which === self.keyCode.TAB) {
            event.preventDefault();
          }
  
          return;
        } else if (event.which === self.keyCode.TAB && self.standaloneMode) {
          // delegate to the normal tab order if the TAB key is pressed in standalone mode
          return;
        }
  
        // Broadcast the action that any child controllers should take.
        var action = self.getActionFromKeyEvent(event);
        if (action) {
          event.preventDefault();
          event.stopPropagation();
          self.$scope.$broadcast('md-calendar-parent-action', action);
        }
      });
    };
  
    /**
     * Hides the vertical scrollbar on the calendar scroller of a child controller by
     * setting the width on the calendar scroller and the `overflow: hidden` wrapper
     * around the scroller, and then setting a padding-right on the scroller equal
     * to the width of the browser's scrollbar.
     *
     * This will cause a reflow.
     *
     * @param {object} childCtrl The child controller whose scrollbar should be hidden.
     */
    CalendarCtrl.prototype.hideVerticalScrollbar = function(childCtrl) {
      var self = this;
      var element = childCtrl.$element[0];
      var scrollMask = element.querySelector('.md-calendar-scroll-mask');
  
      if (self.width > 0) {
        setWidth();
      } else {
        self.$$rAF(function() {
          var scroller = childCtrl.calendarScroller;
  
          self.scrollbarWidth = scroller.offsetWidth - scroller.clientWidth;
          self.width = element.querySelector('table').offsetWidth;
          setWidth();
        });
      }
  
      function setWidth() {
        var width = self.width || FALLBACK_WIDTH;
        var scrollbarWidth = self.scrollbarWidth;
        var scroller = childCtrl.calendarScroller;
  
        scrollMask.style.width = width + 'px';
        scroller.style.width = (width + scrollbarWidth) + 'px';
        scroller.style.paddingRight = scrollbarWidth + 'px';
      }
    };
  
    /**
     * Gets an identifier for a date unique to the calendar instance for internal
     * purposes. Not to be displayed.
     * @param {Date} date The date for which the id is being generated
     * @param {string} namespace Namespace for the id. (month, year etc.)
     * @returns {string}
     */
    CalendarCtrl.prototype.getDateId = function(date, namespace) {
      if (!namespace) {
        throw new Error('A namespace for the date id has to be specified.');
      }
  
      return [
        'md',
        this.id,
        namespace,
        date.getFullYear(),
        date.getMonth(),
        date.getDate()
      ].join('-');
    };
  
    /**
     * Util to trigger an extra digest on a parent scope, in order to to ensure that
     * any child virtual repeaters have updated. This is necessary, because the virtual
     * repeater doesn't update the $index the first time around since the content isn't
     * in place yet. The case, in which this is an issue, is when the repeater has less
     * than a page of content (e.g. a month or year view has a min or max date).
     */
    CalendarCtrl.prototype.updateVirtualRepeat = function() {
      var scope = this.$scope;
      var virtualRepeatResizeListener = scope.$on('$md-resize-enable', function() {
        if (!scope.$$phase) {
          scope.$apply();
        }
  
        virtualRepeatResizeListener();
      });
    };
  })();
  
  (function() {
    'use strict';
  
    CalendarMonthCtrl['$inject'] = ["$element", "$scope", "$animate", "$q", "$$mdDateUtil", "$mdDateLocale"];
    angular.module('material.components.datepicker')
      .directive('mdCalendarMonth', calendarDirective);
  
    /**
     * Height of one calendar month tbody. This must be made known to the virtual-repeat and is
     * subsequently used for scrolling to specific months.
     */
    var TBODY_HEIGHT = 265;
  
    /**
     * Height of a calendar month with a single row. This is needed to calculate the offset for
     * rendering an extra month in virtual-repeat that only contains one row.
     */
    var TBODY_SINGLE_ROW_HEIGHT = 45;
  
    /** Private directive that represents a list of months inside the calendar. */
    function calendarDirective() {
      return {
        template:
          '<table aria-hidden="true" class="md-calendar-day-header"><thead></thead></table>' +
          '<div class="md-calendar-scroll-mask">' +
          '<md-virtual-repeat-container class="md-calendar-scroll-container" ' +
                'md-offset-size="' + (TBODY_SINGLE_ROW_HEIGHT - TBODY_HEIGHT) + '">' +
              '<table role="grid" tabindex="0" class="md-calendar" aria-readonly="true">' +
                '<tbody ' +
                    'md-calendar-month-body ' +
                    'role="rowgroup" ' +
                    'md-virtual-repeat="i in monthCtrl.items" ' +
                    'md-month-offset="$index" ' +
                    'class="md-calendar-month" ' +
                    'md-start-index="monthCtrl.getSelectedMonthIndex()" ' +
                    'md-item-size="' + TBODY_HEIGHT + '">' +
  
                  // The <tr> ensures that the <tbody> will always have the
                  // proper height, even if it's empty. If it's content is
                  // compiled, the <tr> will be overwritten.
                  '<tr aria-hidden="true" md-force-height="\'' + TBODY_HEIGHT + 'px\'"></tr>' +
                '</tbody>' +
              '</table>' +
            '</md-virtual-repeat-container>' +
          '</div>',
        require: ['^^mdCalendar', 'mdCalendarMonth'],
        controller: CalendarMonthCtrl,
        controllerAs: 'monthCtrl',
        bindToController: true,
        link: function(scope, element, attrs, controllers) {
          var calendarCtrl = controllers[0];
          var monthCtrl = controllers[1];
          monthCtrl.initialize(calendarCtrl);
        }
      };
    }
  
    /**
     * Controller for the calendar month component.
     * ngInject @constructor
     */
    function CalendarMonthCtrl($element, $scope, $animate, $q,
      $$mdDateUtil, $mdDateLocale) {
  
      /** @final {!angular.JQLite} */
      this.$element = $element;
  
      /** @final {!angular.Scope} */
      this.$scope = $scope;
  
      /** @final {!angular.$animate} */
      this.$animate = $animate;
  
      /** @final {!angular.$q} */
      this.$q = $q;
  
      /** @final */
      this.dateUtil = $$mdDateUtil;
  
      /** @final */
      this.dateLocale = $mdDateLocale;
  
      /** @final {HTMLElement} */
      this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller');
  
      /** @type {boolean} */
      this.isInitialized = false;
  
      /** @type {boolean} */
      this.isMonthTransitionInProgress = false;
  
      var self = this;
  
      /**
       * Handles a click event on a date cell.
       * Created here so that every cell can use the same function instance.
       * @this {HTMLTableCellElement} The cell that was clicked.
       */
      this.cellClickHandler = function() {
        var timestamp = $$mdDateUtil.getTimestampFromNode(this);
        self.$scope.$apply(function() {
          // The timestamp has to be converted to a valid date.
          self.calendarCtrl.setNgModelValue(new Date(timestamp));
        });
      };
  
      /**
       * Handles click events on the month headers. Switches
       * the calendar to the year view.
       * @this {HTMLTableCellElement} The cell that was clicked.
       */
      this.headerClickHandler = function() {
        self.calendarCtrl.setCurrentView('year', $$mdDateUtil.getTimestampFromNode(this));
      };
    }
  
    /** Initialization **/
  
    /**
     * Initialize the controller by saving a reference to the calendar and
     * setting up the object that will be iterated by the virtual repeater.
     */
    CalendarMonthCtrl.prototype.initialize = function(calendarCtrl) {
      /**
       * Dummy array-like object for virtual-repeat to iterate over. The length is the total
       * number of months that can be viewed. We add 2 months: one to include the current month
       * and one for the last dummy month.
       *
       * This is shorter than ideal because of a (potential) Firefox bug
       * https://bugzilla.mozilla.org/show_bug.cgi?id=1181658.
       */
  
      this.items = {
        length: this.dateUtil.getMonthDistance(
          calendarCtrl.firstRenderableDate,
          calendarCtrl.lastRenderableDate
        ) + 2
      };
  
      this.calendarCtrl = calendarCtrl;
      this.attachScopeListeners();
      calendarCtrl.updateVirtualRepeat();
  
      // Fire the initial render, since we might have missed it the first time it fired.
      calendarCtrl.ngModelCtrl && calendarCtrl.ngModelCtrl.$render();
    };
  
    /**
     * Gets the "index" of the currently selected date as it would be in the virtual-repeat.
     * @returns {number} the "index" of the currently selected date
     */
    CalendarMonthCtrl.prototype.getSelectedMonthIndex = function() {
      var calendarCtrl = this.calendarCtrl;
  
      return this.dateUtil.getMonthDistance(
        calendarCtrl.firstRenderableDate,
        calendarCtrl.displayDate || calendarCtrl.selectedDate || calendarCtrl.today
      );
    };
  
    /**
     * Change the date that is being shown in the calendar. If the given date is in a different
     * month, the displayed month will be transitioned.
     * @param {Date} date
     */
    CalendarMonthCtrl.prototype.changeDisplayDate = function(date) {
      // Initialization is deferred until this function is called because we want to reflect
      // the starting value of ngModel.
      if (!this.isInitialized) {
        this.buildWeekHeader();
        this.calendarCtrl.hideVerticalScrollbar(this);
        this.isInitialized = true;
        return this.$q.when();
      }
  
      // If trying to show an invalid date or a transition is in progress, do nothing.
      if (!this.dateUtil.isValidDate(date) || this.isMonthTransitionInProgress) {
        return this.$q.when();
      }
  
      this.isMonthTransitionInProgress = true;
      var animationPromise = this.animateDateChange(date);
  
      this.calendarCtrl.displayDate = date;
  
      var self = this;
      animationPromise.then(function() {
        self.isMonthTransitionInProgress = false;
      });
  
      return animationPromise;
    };
  
    /**
     * Animates the transition from the calendar's current month to the given month.
     * @param {Date} date
     * @returns {angular.$q.Promise} The animation promise.
     */
    CalendarMonthCtrl.prototype.animateDateChange = function(date) {
      if (this.dateUtil.isValidDate(date)) {
        var monthDistance = this.dateUtil.getMonthDistance(this.calendarCtrl.firstRenderableDate, date);
        this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT;
      }
  
      return this.$q.when();
    };
  
    /**
     * Builds and appends a day-of-the-week header to the calendar.
     * This should only need to be called once during initialization.
     */
    CalendarMonthCtrl.prototype.buildWeekHeader = function() {
      var firstDayOfWeek = this.dateLocale.firstDayOfWeek;
      var shortDays = this.dateLocale.shortDays;
  
      var row = document.createElement('tr');
      for (var i = 0; i < 7; i++) {
        var th = document.createElement('th');
        th.textContent = shortDays[(i + firstDayOfWeek) % 7];
        row.appendChild(th);
      }
  
      this.$element.find('thead').append(row);
    };
  
    /**
     * Attaches listeners for the scope events that are broadcast by the calendar.
     */
    CalendarMonthCtrl.prototype.attachScopeListeners = function() {
      var self = this;
  
      self.$scope.$on('md-calendar-parent-changed', function(event, value) {
        self.calendarCtrl.changeSelectedDate(value);
        self.changeDisplayDate(value);
      });
  
      self.$scope.$on('md-calendar-parent-action', angular.bind(this, this.handleKeyEvent));
    };
  
    /**
     * Handles the month-specific keyboard interactions.
     * @param {Object} event Scope event object passed by the calendar.
     * @param {String} action Action, corresponding to the key that was pressed.
     */
    CalendarMonthCtrl.prototype.handleKeyEvent = function(event, action) {
      var calendarCtrl = this.calendarCtrl;
      var displayDate = calendarCtrl.displayDate;
  
      if (action === 'select') {
        calendarCtrl.setNgModelValue(displayDate);
      } else {
        var date = null;
        var dateUtil = this.dateUtil;
  
        switch (action) {
          case 'move-right': date = dateUtil.incrementDays(displayDate, 1); break;
          case 'move-left': date = dateUtil.incrementDays(displayDate, -1); break;
  
          case 'move-page-down': date = dateUtil.incrementMonths(displayDate, 1); break;
          case 'move-page-up': date = dateUtil.incrementMonths(displayDate, -1); break;
  
          case 'move-row-down': date = dateUtil.incrementDays(displayDate, 7); break;
          case 'move-row-up': date = dateUtil.incrementDays(displayDate, -7); break;
  
          case 'start': date = dateUtil.getFirstDateOfMonth(displayDate); break;
          case 'end': date = dateUtil.getLastDateOfMonth(displayDate); break;
        }
  
        if (date) {
          date = this.dateUtil.clampDate(date, calendarCtrl.minDate, calendarCtrl.maxDate);
  
          this.changeDisplayDate(date).then(function() {
            calendarCtrl.focusDate(date);
          });
        }
      }
    };
  })();
  
  (function() {
    'use strict';
  
    mdCalendarMonthBodyDirective['$inject'] = ["$compile", "$$mdSvgRegistry"];
    CalendarMonthBodyCtrl['$inject'] = ["$element", "$$mdDateUtil", "$mdDateLocale"];
    angular.module('material.components.datepicker')
        .directive('mdCalendarMonthBody', mdCalendarMonthBodyDirective);
  
    /**
     * Private directive consumed by md-calendar-month. Having this directive lets the calender use
     * md-virtual-repeat and also cleanly separates the month DOM construction functions from
     * the rest of the calendar controller logic.
     * ngInject
     */
    function mdCalendarMonthBodyDirective($compile, $$mdSvgRegistry) {
      var ARROW_ICON = $compile('<md-icon md-svg-src="' +
        $$mdSvgRegistry.mdTabsArrow + '"></md-icon>')({})[0];
  
      return {
        require: ['^^mdCalendar', '^^mdCalendarMonth', 'mdCalendarMonthBody'],
        scope: { offset: '=mdMonthOffset' },
        controller: CalendarMonthBodyCtrl,
        controllerAs: 'mdMonthBodyCtrl',
        bindToController: true,
        link: function(scope, element, attrs, controllers) {
          var calendarCtrl = controllers[0];
          var monthCtrl = controllers[1];
          var monthBodyCtrl = controllers[2];
  
          monthBodyCtrl.calendarCtrl = calendarCtrl;
          monthBodyCtrl.monthCtrl = monthCtrl;
          monthBodyCtrl.arrowIcon = ARROW_ICON.cloneNode(true);
  
          // The virtual-repeat re-uses the same DOM elements, so there are only a limited number
          // of repeated items that are linked, and then those elements have their bindings updated.
          // Since the months are not generated by bindings, we simply regenerate the entire thing
          // when the binding (offset) changes.
          scope.$watch(function() { return monthBodyCtrl.offset; }, function(offset) {
            if (angular.isNumber(offset)) {
              monthBodyCtrl.generateContent();
            }
          });
        }
      };
    }
  
    /**
     * Controller for a single calendar month.
     * ngInject @constructor
     */
    function CalendarMonthBodyCtrl($element, $$mdDateUtil, $mdDateLocale) {
      /**
       * @final
       * @type {!JQLite}
       */
      this.$element = $element;
  
      /** @final */
      this.dateUtil = $$mdDateUtil;
  
      /** @final */
      this.dateLocale = $mdDateLocale;
  
      /** @type {Object} Reference to the month view. */
      this.monthCtrl = null;
  
      /** @type {Object} Reference to the calendar. */
      this.calendarCtrl = null;
  
      /**
       * Number of months from the start of the month "items" that the currently rendered month
       * occurs. Set via angular data binding.
       * @type {number|null}
       */
      this.offset = null;
  
      /**
       * Date cell to focus after appending the month to the document.
       * @type {HTMLElement}
       */
      this.focusAfterAppend = null;
    }
  
    /** Generate and append the content for this month to the directive element. */
    CalendarMonthBodyCtrl.prototype.generateContent = function() {
      var date = this.dateUtil.incrementMonths(this.calendarCtrl.firstRenderableDate, this.offset);
  
      this.$element
        .empty()
        .append(this.buildCalendarForMonth(date));
  
      if (this.focusAfterAppend) {
        this.focusAfterAppend.classList.add(this.calendarCtrl.FOCUSED_DATE_CLASS);
        this.focusAfterAppend = null;
      }
    };
  
    /**
     * Creates a single cell to contain a date in the calendar with all appropriate
     * attributes and classes added. If a date is given, the cell content will be set
     * based on the date.
     * @param {Date=} opt_date
     * @returns {HTMLElement}
     */
    CalendarMonthBodyCtrl.prototype.buildDateCell = function(opt_date) {
      var monthCtrl = this.monthCtrl;
      var calendarCtrl = this.calendarCtrl;
  
      // TODO(jelbourn): cloneNode is likely a faster way of doing this.
      var cell = document.createElement('td');
      cell.tabIndex = -1;
      cell.classList.add('md-calendar-date');
      cell.setAttribute('role', 'gridcell');
  
      if (opt_date) {
        cell.setAttribute('tabindex', '-1');
        cell.setAttribute('aria-label', this.dateLocale.longDateFormatter(opt_date));
        cell.id = calendarCtrl.getDateId(opt_date, 'month');
  
        // Use `data-timestamp` attribute because IE10 does not support the `dataset` property.
        cell.setAttribute('data-timestamp', opt_date.getTime());
  
        // TODO(jelourn): Doing these comparisons for class addition during generation might be slow.
        // It may be better to finish the construction and then query the node and add the class.
        if (this.dateUtil.isSameDay(opt_date, calendarCtrl.today)) {
          cell.classList.add(calendarCtrl.TODAY_CLASS);
        }
  
        if (this.dateUtil.isValidDate(calendarCtrl.selectedDate) &&
            this.dateUtil.isSameDay(opt_date, calendarCtrl.selectedDate)) {
          cell.classList.add(calendarCtrl.SELECTED_DATE_CLASS);
          cell.setAttribute('aria-selected', 'true');
        }
  
        var cellText = this.dateLocale.dates[opt_date.getDate()];
  
        if (this.isDateEnabled(opt_date)) {
          // Add a indicator for select, hover, and focus states.
          var selectionIndicator = document.createElement('span');
          selectionIndicator.classList.add('md-calendar-date-selection-indicator');
          selectionIndicator.textContent = cellText;
          cell.appendChild(selectionIndicator);
          cell.addEventListener('click', monthCtrl.cellClickHandler);
  
          if (calendarCtrl.displayDate && this.dateUtil.isSameDay(opt_date, calendarCtrl.displayDate)) {
            this.focusAfterAppend = cell;
          }
        } else {
          cell.classList.add('md-calendar-date-disabled');
          cell.textContent = cellText;
        }
      }
  
      return cell;
    };
  
    /**
     * Check whether date is in range and enabled
     * @param {Date=} opt_date
     * @return {boolean} Whether the date is enabled.
     */
    CalendarMonthBodyCtrl.prototype.isDateEnabled = function(opt_date) {
      return this.dateUtil.isDateWithinRange(opt_date,
            this.calendarCtrl.minDate, this.calendarCtrl.maxDate) &&
            (!angular.isFunction(this.calendarCtrl.dateFilter)
             || this.calendarCtrl.dateFilter(opt_date));
    };
  
    /**
     * Builds a `tr` element for the calendar grid.
     * @param rowNumber The week number within the month.
     * @returns {HTMLElement}
     */
    CalendarMonthBodyCtrl.prototype.buildDateRow = function(rowNumber) {
      var row = document.createElement('tr');
      row.setAttribute('role', 'row');
  
      // Because of an NVDA bug (with Firefox), the row needs an aria-label in order
      // to prevent the entire row being read aloud when the user moves between rows.
      // See http://community.nvda-project.org/ticket/4643.
      row.setAttribute('aria-label', this.dateLocale.weekNumberFormatter(rowNumber));
  
      return row;
    };
  
    /**
     * Builds the <tbody> content for the given date's month.
     * @param {Date=} opt_dateInMonth
     * @returns {DocumentFragment} A document fragment containing the <tr> elements.
     */
    CalendarMonthBodyCtrl.prototype.buildCalendarForMonth = function(opt_dateInMonth) {
      var date = this.dateUtil.isValidDate(opt_dateInMonth) ? opt_dateInMonth : new Date();
  
      var firstDayOfMonth = this.dateUtil.getFirstDateOfMonth(date);
      var firstDayOfTheWeek = this.getLocaleDay_(firstDayOfMonth);
      var numberOfDaysInMonth = this.dateUtil.getNumberOfDaysInMonth(date);
  
      // Store rows for the month in a document fragment so that we can append them all at once.
      var monthBody = document.createDocumentFragment();
  
      var rowNumber = 1;
      var row = this.buildDateRow(rowNumber);
      monthBody.appendChild(row);
  
      // If this is the final month in the list of items, only the first week should render,
      // so we should return immediately after the first row is complete and has been
      // attached to the body.
      var isFinalMonth = this.offset === this.monthCtrl.items.length - 1;
  
      // Add a label for the month. If the month starts on a Sun/Mon/Tues, the month label
      // goes on a row above the first of the month. Otherwise, the month label takes up the first
      // two cells of the first row.
      var blankCellOffset = 0;
      var monthLabelCell = document.createElement('td');
      var monthLabelCellContent = document.createElement('span');
      var calendarCtrl = this.calendarCtrl;
  
      monthLabelCellContent.textContent = this.dateLocale.monthHeaderFormatter(date);
      monthLabelCell.appendChild(monthLabelCellContent);
      monthLabelCell.classList.add('md-calendar-month-label');
      // If the entire month is after the max date, render the label as a disabled state.
      if (calendarCtrl.maxDate && firstDayOfMonth > calendarCtrl.maxDate) {
        monthLabelCell.classList.add('md-calendar-month-label-disabled');
      // If the user isn't supposed to be able to change views, render the
      // label as usual, but disable the clicking functionality.
      } else if (!calendarCtrl.mode) {
        monthLabelCell.addEventListener('click', this.monthCtrl.headerClickHandler);
        monthLabelCell.setAttribute('data-timestamp', firstDayOfMonth.getTime());
        monthLabelCell.setAttribute('aria-label', this.dateLocale.monthFormatter(date));
        monthLabelCell.classList.add('md-calendar-label-clickable');
        monthLabelCell.appendChild(this.arrowIcon.cloneNode(true));
      }
  
      if (firstDayOfTheWeek <= 2) {
        monthLabelCell.setAttribute('colspan', '7');
  
        var monthLabelRow = this.buildDateRow();
        monthLabelRow.appendChild(monthLabelCell);
        monthBody.insertBefore(monthLabelRow, row);
  
        if (isFinalMonth) {
          return monthBody;
        }
      } else {
        blankCellOffset = 3;
        monthLabelCell.setAttribute('colspan', '3');
        row.appendChild(monthLabelCell);
      }
  
      // Add a blank cell for each day of the week that occurs before the first of the month.
      // For example, if the first day of the month is a Tuesday, add blank cells for Sun and Mon.
      // The blankCellOffset is needed in cases where the first N cells are used by the month label.
      for (var i = blankCellOffset; i < firstDayOfTheWeek; i++) {
        row.appendChild(this.buildDateCell());
      }
  
      // Add a cell for each day of the month, keeping track of the day of the week so that
      // we know when to start a new row.
      var dayOfWeek = firstDayOfTheWeek;
      var iterationDate = firstDayOfMonth;
      for (var d = 1; d <= numberOfDaysInMonth; d++) {
        // If we've reached the end of the week, start a new row.
        if (dayOfWeek === 7) {
          // We've finished the first row, so we're done if this is the final month.
          if (isFinalMonth) {
            return monthBody;
          }
          dayOfWeek = 0;
          rowNumber++;
          row = this.buildDateRow(rowNumber);
          monthBody.appendChild(row);
        }
  
        iterationDate.setDate(d);
        var cell = this.buildDateCell(iterationDate);
        row.appendChild(cell);
  
        dayOfWeek++;
      }
  
      // Ensure that the last row of the month has 7 cells.
      while (row.childNodes.length < 7) {
        row.appendChild(this.buildDateCell());
      }
  
      // Ensure that all months have 6 rows. This is necessary for now because the virtual-repeat
      // requires that all items have exactly the same height.
      while (monthBody.childNodes.length < 6) {
        var whitespaceRow = this.buildDateRow();
        for (var j = 0; j < 7; j++) {
          whitespaceRow.appendChild(this.buildDateCell());
        }
        monthBody.appendChild(whitespaceRow);
      }
  
      return monthBody;
    };
  
    /**
     * Gets the day-of-the-week index for a date for the current locale.
     * @private
     * @param {Date} date
     * @returns {number} The column index of the date in the calendar.
     */
    CalendarMonthBodyCtrl.prototype.getLocaleDay_ = function(date) {
      return (date.getDay() + (7 - this.dateLocale.firstDayOfWeek)) % 7;
    };
  })();
  
  (function() {
    'use strict';
  
    CalendarYearCtrl['$inject'] = ["$element", "$scope", "$animate", "$q", "$$mdDateUtil", "$mdUtil"];
    angular.module('material.components.datepicker')
      .directive('mdCalendarYear', calendarDirective);
  
    /**
     * Height of one calendar year tbody. This must be made known to the virtual-repeat and is
     * subsequently used for scrolling to specific years.
     */
    var TBODY_HEIGHT = 88;
  
    /** Private component, representing a list of years in the calendar. */
    function calendarDirective() {
      return {
        template:
          '<div class="md-calendar-scroll-mask">' +
            '<md-virtual-repeat-container class="md-calendar-scroll-container">' +
              '<table role="grid" tabindex="0" class="md-calendar" aria-readonly="true">' +
                '<tbody ' +
                    'md-calendar-year-body ' +
                    'role="rowgroup" ' +
                    'md-virtual-repeat="i in yearCtrl.items" ' +
                    'md-year-offset="$index" class="md-calendar-year" ' +
                    'md-start-index="yearCtrl.getFocusedYearIndex()" ' +
                    'md-item-size="' + TBODY_HEIGHT + '">' +
                  // The <tr> ensures that the <tbody> will have the proper
                  // height, even though it may be empty.
                  '<tr aria-hidden="true" md-force-height="\'' + TBODY_HEIGHT + 'px\'"></tr>' +
                '</tbody>' +
              '</table>' +
            '</md-virtual-repeat-container>' +
          '</div>',
        require: ['^^mdCalendar', 'mdCalendarYear'],
        controller: CalendarYearCtrl,
        controllerAs: 'yearCtrl',
        bindToController: true,
        link: function(scope, element, attrs, controllers) {
          var calendarCtrl = controllers[0];
          var yearCtrl = controllers[1];
          yearCtrl.initialize(calendarCtrl);
        }
      };
    }
  
    /**
     * Controller for the mdCalendar component.
     * ngInject @constructor
     */
    function CalendarYearCtrl($element, $scope, $animate, $q, $$mdDateUtil, $mdUtil) {
  
      /** @final {!angular.JQLite} */
      this.$element = $element;
  
      /** @final {!angular.Scope} */
      this.$scope = $scope;
  
      /** @final {!angular.$animate} */
      this.$animate = $animate;
  
      /** @final {!angular.$q} */
      this.$q = $q;
  
      /** @final */
      this.dateUtil = $$mdDateUtil;
  
      /** @final {HTMLElement} */
      this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller');
  
      /** @type {boolean} */
      this.isInitialized = false;
  
      /** @type {boolean} */
      this.isMonthTransitionInProgress = false;
  
      /** @final */
      this.$mdUtil = $mdUtil;
  
      var self = this;
  
      /**
       * Handles a click event on a date cell.
       * Created here so that every cell can use the same function instance.
       * @this {HTMLTableCellElement} The cell that was clicked.
       */
      this.cellClickHandler = function() {
        self.onTimestampSelected($$mdDateUtil.getTimestampFromNode(this));
      };
    }
  
    /**
     * Initialize the controller by saving a reference to the calendar and
     * setting up the object that will be iterated by the virtual repeater.
     */
    CalendarYearCtrl.prototype.initialize = function(calendarCtrl) {
      /**
       * Dummy array-like object for virtual-repeat to iterate over. The length is the total
       * number of years that can be viewed. We add 1 extra in order to include the current year.
       */
  
      this.items = {
        length: this.dateUtil.getYearDistance(
          calendarCtrl.firstRenderableDate,
          calendarCtrl.lastRenderableDate
        ) + 1
      };
  
      this.calendarCtrl = calendarCtrl;
      this.attachScopeListeners();
      calendarCtrl.updateVirtualRepeat();
  
      // Fire the initial render, since we might have missed it the first time it fired.
      calendarCtrl.ngModelCtrl && calendarCtrl.ngModelCtrl.$render();
    };
  
    /**
     * Gets the "index" of the currently selected date as it would be in the virtual-repeat.
     * @returns {number}
     */
    CalendarYearCtrl.prototype.getFocusedYearIndex = function() {
      var calendarCtrl = this.calendarCtrl;
  
      return this.dateUtil.getYearDistance(
        calendarCtrl.firstRenderableDate,
        calendarCtrl.displayDate || calendarCtrl.selectedDate || calendarCtrl.today
      );
    };
  
    /**
     * Change the date that is highlighted in the calendar.
     * @param {Date} date
     */
    CalendarYearCtrl.prototype.changeDate = function(date) {
      // Initialization is deferred until this function is called because we want to reflect
      // the starting value of ngModel.
      if (!this.isInitialized) {
        this.calendarCtrl.hideVerticalScrollbar(this);
        this.isInitialized = true;
        return this.$q.when();
      } else if (this.dateUtil.isValidDate(date) && !this.isMonthTransitionInProgress) {
        var self = this;
        var animationPromise = this.animateDateChange(date);
  
        self.isMonthTransitionInProgress = true;
        self.calendarCtrl.displayDate = date;
  
        return animationPromise.then(function() {
          self.isMonthTransitionInProgress = false;
        });
      }
    };
  
    /**
     * Animates the transition from the calendar's current month to the given month.
     * @param {Date} date
     * @returns {angular.$q.Promise} The animation promise.
     */
    CalendarYearCtrl.prototype.animateDateChange = function(date) {
      if (this.dateUtil.isValidDate(date)) {
        var monthDistance = this.dateUtil.getYearDistance(this.calendarCtrl.firstRenderableDate, date);
        this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT;
      }
  
      return this.$q.when();
    };
  
    /**
     * Handles the year-view-specific keyboard interactions.
     * @param {Object} event Scope event object passed by the calendar.
     * @param {String} action Action, corresponding to the key that was pressed.
     */
    CalendarYearCtrl.prototype.handleKeyEvent = function(event, action) {
      var self = this;
      var calendarCtrl = self.calendarCtrl;
      var displayDate = calendarCtrl.displayDate;
  
      if (action === 'select') {
        self.changeDate(displayDate).then(function() {
          self.onTimestampSelected(displayDate);
        });
      } else {
        var date = null;
        var dateUtil = self.dateUtil;
  
        switch (action) {
          case 'move-right': date = dateUtil.incrementMonths(displayDate, 1); break;
          case 'move-left': date = dateUtil.incrementMonths(displayDate, -1); break;
  
          case 'move-row-down': date = dateUtil.incrementMonths(displayDate, 6); break;
          case 'move-row-up': date = dateUtil.incrementMonths(displayDate, -6); break;
        }
  
        if (date) {
          var min = calendarCtrl.minDate ? dateUtil.getFirstDateOfMonth(calendarCtrl.minDate) : null;
          var max = calendarCtrl.maxDate ? dateUtil.getFirstDateOfMonth(calendarCtrl.maxDate) : null;
          date = dateUtil.getFirstDateOfMonth(self.dateUtil.clampDate(date, min, max));
  
          self.changeDate(date).then(function() {
            calendarCtrl.focusDate(date);
          });
        }
      }
    };
  
    /**
     * Attaches listeners for the scope events that are broadcast by the calendar.
     */
    CalendarYearCtrl.prototype.attachScopeListeners = function() {
      var self = this;
  
      self.$scope.$on('md-calendar-parent-changed', function(event, value) {
        self.calendarCtrl.changeSelectedDate(value ? self.dateUtil.getFirstDateOfMonth(value) : value);
        self.changeDate(value);
      });
  
      self.$scope.$on('md-calendar-parent-action', angular.bind(self, self.handleKeyEvent));
    };
  
    /**
     * Handles the behavior when a date is selected. Depending on the `mode`
     * of the calendar, this can either switch back to the calendar view or
     * set the model value.
     * @param {number} timestamp The selected timestamp.
     */
    CalendarYearCtrl.prototype.onTimestampSelected = function(timestamp) {
      var calendarCtrl = this.calendarCtrl;
  
      if (calendarCtrl.mode) {
        this.$mdUtil.nextTick(function() {
          // The timestamp has to be converted to a valid date.
          calendarCtrl.setNgModelValue(new Date(timestamp));
        });
      } else {
        calendarCtrl.setCurrentView('month', timestamp);
      }
    };
  })();
  
  (function() {
    'use strict';
  
    CalendarYearBodyCtrl['$inject'] = ["$element", "$$mdDateUtil", "$mdDateLocale"];
    angular.module('material.components.datepicker')
        .directive('mdCalendarYearBody', mdCalendarYearDirective);
  
    /**
     * Private component, consumed by the md-calendar-year, which separates the DOM construction logic
     * and allows for the year view to use md-virtual-repeat.
     */
    function mdCalendarYearDirective() {
      return {
        require: ['^^mdCalendar', '^^mdCalendarYear', 'mdCalendarYearBody'],
        scope: { offset: '=mdYearOffset' },
        controller: CalendarYearBodyCtrl,
        controllerAs: 'mdYearBodyCtrl',
        bindToController: true,
        link: function(scope, element, attrs, controllers) {
          var calendarCtrl = controllers[0];
          var yearCtrl = controllers[1];
          var yearBodyCtrl = controllers[2];
  
          yearBodyCtrl.calendarCtrl = calendarCtrl;
          yearBodyCtrl.yearCtrl = yearCtrl;
  
          scope.$watch(function() { return yearBodyCtrl.offset; }, function(offset) {
            if (angular.isNumber(offset)) {
              yearBodyCtrl.generateContent();
            }
          });
        }
      };
    }
  
    /**
     * Controller for a single year.
     * ngInject @constructor
     */
    function CalendarYearBodyCtrl($element, $$mdDateUtil, $mdDateLocale) {
      /**
       * @final
       * @type {!JQLite}
       */
      this.$element = $element;
  
      /** @final */
      this.dateUtil = $$mdDateUtil;
  
      /** @final */
      this.dateLocale = $mdDateLocale;
  
      /** @type {Object} Reference to the calendar. */
      this.calendarCtrl = null;
  
      /** @type {Object} Reference to the year view. */
      this.yearCtrl = null;
  
      /**
       * Number of months from the start of the month "items" that the currently rendered month
       * occurs. Set via angular data binding.
       * @type {number|null}
       */
      this.offset = null;
  
      /**
       * Date cell to focus after appending the month to the document.
       * @type {HTMLElement}
       */
      this.focusAfterAppend = null;
    }
  
    /** Generate and append the content for this year to the directive element. */
    CalendarYearBodyCtrl.prototype.generateContent = function() {
      var date = this.dateUtil.incrementYears(this.calendarCtrl.firstRenderableDate, this.offset);
  
      this.$element
        .empty()
        .append(this.buildCalendarForYear(date));
  
      if (this.focusAfterAppend) {
        this.focusAfterAppend.classList.add(this.calendarCtrl.FOCUSED_DATE_CLASS);
        this.focusAfterAppend = null;
      }
    };
  
    /**
     * Creates a single cell to contain a year in the calendar.
     * @param {number} year Four-digit year.
     * @param {number} month Zero-indexed month.
     * @returns {HTMLElement}
     */
    CalendarYearBodyCtrl.prototype.buildMonthCell = function(year, month) {
      var calendarCtrl = this.calendarCtrl;
      var yearCtrl = this.yearCtrl;
      var cell = this.buildBlankCell();
  
      // Represent this month/year as a date.
      var firstOfMonth = new Date(year, month, 1);
      cell.setAttribute('aria-label', this.dateLocale.monthFormatter(firstOfMonth));
      cell.id = calendarCtrl.getDateId(firstOfMonth, 'year');
  
      // Use `data-timestamp` attribute because IE10 does not support the `dataset` property.
      cell.setAttribute('data-timestamp', String(firstOfMonth.getTime()));
  
      if (this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.today)) {
        cell.classList.add(calendarCtrl.TODAY_CLASS);
      }
  
      if (this.dateUtil.isValidDate(calendarCtrl.selectedDate) &&
          this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.selectedDate)) {
        cell.classList.add(calendarCtrl.SELECTED_DATE_CLASS);
        cell.setAttribute('aria-selected', 'true');
      }
  
      var cellText = this.dateLocale.shortMonths[month];
  
      if (this.dateUtil.isMonthWithinRange(
            firstOfMonth, calendarCtrl.minDate, calendarCtrl.maxDate) &&
        (!angular.isFunction(calendarCtrl.monthFilter) ||
          calendarCtrl.monthFilter(firstOfMonth))) {
        var selectionIndicator = document.createElement('span');
        selectionIndicator.classList.add('md-calendar-date-selection-indicator');
        selectionIndicator.textContent = cellText;
        cell.appendChild(selectionIndicator);
        cell.addEventListener('click', yearCtrl.cellClickHandler);
  
        if (calendarCtrl.displayDate &&
            this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.displayDate)) {
          this.focusAfterAppend = cell;
        }
      } else {
        cell.classList.add('md-calendar-date-disabled');
        cell.textContent = cellText;
      }
  
      return cell;
    };
  
    /**
     * Builds a blank cell.
     * @return {HTMLElement}
     */
    CalendarYearBodyCtrl.prototype.buildBlankCell = function() {
      var cell = document.createElement('td');
      cell.tabIndex = -1;
      cell.classList.add('md-calendar-date');
      cell.setAttribute('role', 'gridcell');
  
      cell.setAttribute('tabindex', '-1');
      return cell;
    };
  
    /**
     * Builds the <tbody> content for the given year.
     * @param {Date} date Date for which the content should be built.
     * @returns {DocumentFragment} A document fragment containing the months within the year.
     */
    CalendarYearBodyCtrl.prototype.buildCalendarForYear = function(date) {
      // Store rows for the month in a document fragment so that we can append them all at once.
      var year = date.getFullYear();
      var yearBody = document.createDocumentFragment();
  
      var monthCell, i;
      // First row contains label and Jan-Jun.
      var firstRow = document.createElement('tr');
      var labelCell = document.createElement('td');
      labelCell.className = 'md-calendar-month-label';
      labelCell.textContent = String(year);
      firstRow.appendChild(labelCell);
  
      for (i = 0; i < 6; i++) {
        firstRow.appendChild(this.buildMonthCell(year, i));
      }
      yearBody.appendChild(firstRow);
  
      // Second row contains a blank cell and Jul-Dec.
      var secondRow = document.createElement('tr');
      secondRow.appendChild(this.buildBlankCell());
      for (i = 6; i < 12; i++) {
        secondRow.appendChild(this.buildMonthCell(year, i));
      }
      yearBody.appendChild(secondRow);
  
      return yearBody;
    };
  })();
  
  (function() {
    'use strict';
  
    /**
     * @ngdoc service
     * @name $mdDateLocaleProvider
     * @module material.components.datepicker
     *
     * @description
     * The `$mdDateLocaleProvider` is the provider that creates the `$mdDateLocale` service.
     * This provider that allows the user to specify messages, formatters, and parsers for date
     * internationalization. The `$mdDateLocale` service itself is consumed by AngularJS Material
     * components that deal with dates
     * (i.e. <a ng-href="api/directive/mdDatepicker">mdDatepicker</a>).
     *
     * @property {Array<string>} months Array of month names (in order).
     * @property {Array<string>} shortMonths Array of abbreviated month names.
     * @property {Array<string>} days Array of the days of the week (in order).
     * @property {Array<string>} shortDays Array of abbreviated days of the week.
     * @property {Array<string>} dates Array of dates of the month. Only necessary for locales
     *  using a numeral system other than [1, 2, 3...].
     * @property {Array<string>} firstDayOfWeek The first day of the week. Sunday = 0, Monday = 1,
     *  etc.
     * @property {function(string): Date} parseDate Function that converts a date string to a Date
     *  object (the date portion).
     * @property {function(Date, string): string} formatDate Function to format a date object to a
     *  string. The datepicker directive also provides the time zone, if it was specified.
     * @property {function(Date): string} monthHeaderFormatter Function that returns the label for
     *  a month given a date.
     * @property {function(Date): string} monthFormatter Function that returns the full name of a month
     *  for a given date.
     * @property {function(number): string} weekNumberFormatter Function that returns a label for
     *  a week given the week number.
     * @property {function(Date): string} longDateFormatter Function that formats a date into a long
     *  `aria-label` that is read by the screen reader when the focused date changes.
     * @property {string} msgCalendar Translation of the label "Calendar" for the current locale.
     * @property {string} msgOpenCalendar Translation of the button label "Open calendar" for the
     *  current locale.
     * @property {Date} firstRenderableDate The date from which the datepicker calendar will begin
     *  rendering. Note that this will be ignored if a minimum date is set.
     *  Defaults to January 1st 1880.
     * @property {Date} lastRenderableDate The last date that will be rendered by the datepicker
     *  calendar. Note that this will be ignored if a maximum date is set.
     *  Defaults to January 1st 2130.
     * @property {function(string): boolean} isDateComplete Function to determine whether a string
     *  makes sense to be parsed to a `Date` object. Returns `true` if the date appears to be complete
     *  and parsing should occur. By default, this checks for 3 groups of text or numbers separated
     *  by delimiters. This means that by default, date strings must include a month, day, and year
     *  to be parsed and for the model to be updated.
     *
     * @usage
     * <hljs lang="js">
     * myAppModule.config(function($mdDateLocaleProvider) {
     *
     *     // Example of a French localization.
     *     $mdDateLocaleProvider.months = ['janvier', 'février', 'mars', ...];
     *     $mdDateLocaleProvider.shortMonths = ['janv', 'févr', 'mars', ...];
     *     $mdDateLocaleProvider.days = ['dimanche', 'lundi', 'mardi', ...];
     *     $mdDateLocaleProvider.shortDays = ['Di', 'Lu', 'Ma', ...];
     *
     *     // Can change week display to start on Monday.
     *     $mdDateLocaleProvider.firstDayOfWeek = 1;
     *
     *     // Optional.
     *     $mdDateLocaleProvider.dates = [1, 2, 3, 4, 5, 6, ...];
     *
     *     // Example uses moment.js to parse and format dates.
     *     $mdDateLocaleProvider.parseDate = function(dateString) {
     *       var m = moment(dateString, 'L', true);
     *       return m.isValid() ? m.toDate() : new Date(NaN);
     *     };
     *
     *     $mdDateLocaleProvider.formatDate = function(date) {
     *       var m = moment(date);
     *       return m.isValid() ? m.format('L') : '';
     *     };
     *
     *     // Allow only a day and month to be specified.
     *     // This is required if using the 'M/D' format with moment.js.
     *     $mdDateLocaleProvider.isDateComplete = function(dateString) {
     *       dateString = dateString.trim();
     *
     *       // Look for two chunks of content (either numbers or text) separated by delimiters.
     *       var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ .,]+|[/-]))([a-zA-Z]{3,}|[0-9]{1,4})/;
     *       return re.test(dateString);
     *     };
     *
     *     $mdDateLocaleProvider.monthHeaderFormatter = function(date) {
     *       return myShortMonths[date.getMonth()] + ' ' + date.getFullYear();
     *     };
     *
     *     // In addition to date display, date components also need localized messages
     *     // for aria-labels for screen-reader users.
     *
     *     $mdDateLocaleProvider.weekNumberFormatter = function(weekNumber) {
     *       return 'Semaine ' + weekNumber;
     *     };
     *
     *     $mdDateLocaleProvider.msgCalendar = 'Calendrier';
     *     $mdDateLocaleProvider.msgOpenCalendar = 'Ouvrir le calendrier';
     *
     *     // You can also set when your calendar begins and ends.
     *     $mdDateLocaleProvider.firstRenderableDate = new Date(1776, 6, 4);
     *     $mdDateLocaleProvider.lastRenderableDate = new Date(2012, 11, 21);
     * });
     * </hljs>
     *
     */
    angular.module('material.components.datepicker').config(["$provide", function($provide) {
      // TODO(jelbourn): Assert provided values are correctly formatted. Need assertions.
  
      /** @constructor */
      function DateLocaleProvider() {
        /** Array of full month names. E.g., ['January', 'February', ...] */
        this.months = null;
  
        /** Array of abbreviated month names. E.g., ['Jan', 'Feb', ...] */
        this.shortMonths = null;
  
        /** Array of full day of the week names. E.g., ['Monday', 'Tuesday', ...] */
        this.days = null;
  
        /** Array of abbreviated dat of the week names. E.g., ['M', 'T', ...] */
        this.shortDays = null;
  
        /** Array of dates of a month (1 - 31). Characters might be different in some locales. */
        this.dates = null;
  
        /** Index of the first day of the week. 0 = Sunday, 1 = Monday, etc. */
        this.firstDayOfWeek = 0;
  
        /**
         * Function that converts the date portion of a Date to a string.
         * @type {(function(Date): string)}
         */
        this.formatDate = null;
  
        /**
         * Function that converts a date string to a Date object (the date portion)
         * @type {function(string): Date}
         */
        this.parseDate = null;
  
        /**
         * Function that formats a Date into a month header string.
         * @type {function(Date): string}
         */
        this.monthHeaderFormatter = null;
  
        /**
         * Function that formats a week number into a label for the week.
         * @type {function(number): string}
         */
        this.weekNumberFormatter = null;
  
        /**
         * Function that formats a date into a long aria-label that is read
         * when the focused date changes.
         * @type {function(Date): string}
         */
        this.longDateFormatter = null;
  
        /**
         * Function to determine whether a string makes sense to be
         * parsed to a Date object.
         * @type {function(string): boolean}
         */
        this.isDateComplete = null;
  
        /**
         * ARIA label for the calendar "dialog" used in the datepicker.
         * @type {string}
         */
        this.msgCalendar = '';
  
        /**
         * ARIA label for the datepicker's "Open calendar" buttons.
         * @type {string}
         */
        this.msgOpenCalendar = '';
      }
  
      /**
       * Factory function that returns an instance of the dateLocale service.
       * ngInject
       * @param $locale
       * @param $filter
       * @returns {DateLocale}
       */
      DateLocaleProvider.prototype.$get = function($locale, $filter) {
        /**
         * Default date-to-string formatting function.
         * @param {!Date} date
         * @param {string=} timezone
         * @returns {string}
         */
        function defaultFormatDate(date, timezone) {
          if (!date) {
            return '';
          }
  
          // All of the dates created through ng-material *should* be set to midnight.
          // If we encounter a date where the localeTime shows at 11pm instead of midnight,
          // we have run into an issue with DST where we need to increment the hour by one:
          // var d = new Date(1992, 9, 8, 0, 0, 0);
          // d.toLocaleString(); // == "10/7/1992, 11:00:00 PM"
          var localeTime = date.toLocaleTimeString();
          var formatDate = date;
          if (date.getHours() === 0 &&
              (localeTime.indexOf('11:') !== -1 || localeTime.indexOf('23:') !== -1)) {
            formatDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 1, 0, 0);
          }
  
          return $filter('date')(formatDate, 'M/d/yyyy', timezone);
        }
  
        /**
         * Default string-to-date parsing function.
         * @param {string|number} dateString
         * @returns {!Date}
         */
        function defaultParseDate(dateString) {
          return new Date(dateString);
        }
  
        /**
         * Default function to determine whether a string makes sense to be
         * parsed to a Date object.
         *
         * This is very permissive and is just a basic check to ensure that
         * things like single integers aren't able to be parsed into dates.
         * @param {string} dateString
         * @returns {boolean}
         */
        function defaultIsDateComplete(dateString) {
          dateString = dateString.trim();
  
          // Looks for three chunks of content (either numbers or text) separated
          // by delimiters.
          var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ .,]+|[/-])){2}([a-zA-Z]{3,}|[0-9]{1,4})$/;
          return re.test(dateString);
        }
  
        /**
         * Default date-to-string formatter to get a month header.
         * @param {!Date} date
         * @returns {string}
         */
        function defaultMonthHeaderFormatter(date) {
          return service.shortMonths[date.getMonth()] + ' ' + date.getFullYear();
        }
  
        /**
         * Default formatter for a month.
         * @param {!Date} date
         * @returns {string}
         */
        function defaultMonthFormatter(date) {
          return service.months[date.getMonth()] + ' ' + date.getFullYear();
        }
  
        /**
         * Default week number formatter.
         * @param number
         * @returns {string}
         */
        function defaultWeekNumberFormatter(number) {
          return 'Week ' + number;
        }
  
        /**
         * Default formatter for date cell aria-labels.
         * @param {!Date} date
         * @returns {string}
         */
        function defaultLongDateFormatter(date) {
          // Example: 'Thursday June 18 2015'
          return [
            service.days[date.getDay()],
            service.months[date.getMonth()],
            service.dates[date.getDate()],
            date.getFullYear()
          ].join(' ');
        }
  
        // The default "short" day strings are the first character of each day,
        // e.g., "Monday" => "M".
        var defaultShortDays = $locale.DATETIME_FORMATS.SHORTDAY.map(function(day) {
          return day.substring(0, 1);
        });
  
        // The default dates are simply the numbers 1 through 31.
        var defaultDates = Array(32);
        for (var i = 1; i <= 31; i++) {
          defaultDates[i] = i;
        }
  
        // Default ARIA messages are in English (US).
        var defaultMsgCalendar = 'Calendar';
        var defaultMsgOpenCalendar = 'Open calendar';
  
        // Default start/end dates that are rendered in the calendar.
        var defaultFirstRenderableDate = new Date(1880, 0, 1);
        var defaultLastRendereableDate = new Date(defaultFirstRenderableDate.getFullYear() + 250, 0, 1);
  
        var service = {
          months: this.months || $locale.DATETIME_FORMATS.MONTH,
          shortMonths: this.shortMonths || $locale.DATETIME_FORMATS.SHORTMONTH,
          days: this.days || $locale.DATETIME_FORMATS.DAY,
          shortDays: this.shortDays || defaultShortDays,
          dates: this.dates || defaultDates,
          firstDayOfWeek: this.firstDayOfWeek || 0,
          formatDate: this.formatDate || defaultFormatDate,
          parseDate: this.parseDate || defaultParseDate,
          isDateComplete: this.isDateComplete || defaultIsDateComplete,
          monthHeaderFormatter: this.monthHeaderFormatter || defaultMonthHeaderFormatter,
          monthFormatter: this.monthFormatter || defaultMonthFormatter,
          weekNumberFormatter: this.weekNumberFormatter || defaultWeekNumberFormatter,
          longDateFormatter: this.longDateFormatter || defaultLongDateFormatter,
          msgCalendar: this.msgCalendar || defaultMsgCalendar,
          msgOpenCalendar: this.msgOpenCalendar || defaultMsgOpenCalendar,
          firstRenderableDate: this.firstRenderableDate || defaultFirstRenderableDate,
          lastRenderableDate: this.lastRenderableDate || defaultLastRendereableDate
        };
  
        return service;
      };
      DateLocaleProvider.prototype.$get['$inject'] = ["$locale", "$filter"];
  
      $provide.provider('$mdDateLocale', new DateLocaleProvider());
    }]);
  })();
  
  (function() {
    'use strict';
  
    /**
     * Utility for performing date calculations to facilitate operation of the calendar and
     * datepicker.
     */
    angular.module('material.components.datepicker').factory('$$mdDateUtil', ["$mdDateLocale", function($mdDateLocale) {
      return {
        getFirstDateOfMonth: getFirstDateOfMonth,
        getNumberOfDaysInMonth: getNumberOfDaysInMonth,
        getDateInNextMonth: getDateInNextMonth,
        getDateInPreviousMonth: getDateInPreviousMonth,
        isInNextMonth: isInNextMonth,
        isInPreviousMonth: isInPreviousMonth,
        getDateMidpoint: getDateMidpoint,
        isSameMonthAndYear: isSameMonthAndYear,
        getWeekOfMonth: getWeekOfMonth,
        incrementDays: incrementDays,
        incrementMonths: incrementMonths,
        getLastDateOfMonth: getLastDateOfMonth,
        isSameDay: isSameDay,
        getMonthDistance: getMonthDistance,
        isValidDate: isValidDate,
        setDateTimeToMidnight: setDateTimeToMidnight,
        createDateAtMidnight: createDateAtMidnight,
        isDateWithinRange: isDateWithinRange,
        incrementYears: incrementYears,
        getYearDistance: getYearDistance,
        clampDate: clampDate,
        getTimestampFromNode: getTimestampFromNode,
        isMonthWithinRange: isMonthWithinRange,
        removeLocalTzAndReparseDate: removeLocalTzAndReparseDate
      };
  
      /**
       * Gets the first day of the month for the given date's month.
       * @param {Date} date
       * @returns {Date}
       */
      function getFirstDateOfMonth(date) {
        return new Date(date.getFullYear(), date.getMonth(), 1);
      }
  
      /**
       * Gets the number of days in the month for the given date's month.
       * @param date
       * @returns {number}
       */
      function getNumberOfDaysInMonth(date) {
        return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
      }
  
      /**
       * Get an arbitrary date in the month after the given date's month.
       * @param date
       * @returns {Date}
       */
      function getDateInNextMonth(date) {
        return new Date(date.getFullYear(), date.getMonth() + 1, 1);
      }
  
      /**
       * Get an arbitrary date in the month before the given date's month.
       * @param date
       * @returns {Date}
       */
      function getDateInPreviousMonth(date) {
        return new Date(date.getFullYear(), date.getMonth() - 1, 1);
      }
  
      /**
       * Gets whether two dates have the same month and year.
       * @param {Date} d1
       * @param {Date} d2
       * @returns {boolean}
       */
      function isSameMonthAndYear(d1, d2) {
        return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth();
      }
  
      /**
       * Gets whether two dates are the same day (not not necessarily the same time).
       * @param {Date} d1
       * @param {Date} d2
       * @returns {boolean}
       */
      function isSameDay(d1, d2) {
        return d1.getDate() == d2.getDate() && isSameMonthAndYear(d1, d2);
      }
  
      /**
       * Gets whether a date is in the month immediately after some date.
       * @param {Date} startDate The date from which to compare.
       * @param {Date} endDate The date to check.
       * @returns {boolean}
       */
      function isInNextMonth(startDate, endDate) {
        var nextMonth = getDateInNextMonth(startDate);
        return isSameMonthAndYear(nextMonth, endDate);
      }
  
      /**
       * Gets whether a date is in the month immediately before some date.
       * @param {Date} startDate The date from which to compare.
       * @param {Date} endDate The date to check.
       * @returns {boolean}
       */
      function isInPreviousMonth(startDate, endDate) {
        var previousMonth = getDateInPreviousMonth(startDate);
        return isSameMonthAndYear(endDate, previousMonth);
      }
  
      /**
       * Gets the midpoint between two dates.
       * @param {Date} d1
       * @param {Date} d2
       * @returns {Date}
       */
      function getDateMidpoint(d1, d2) {
        return createDateAtMidnight((d1.getTime() + d2.getTime()) / 2);
      }
  
      /**
       * Gets the week of the month that a given date occurs in.
       * @param {Date} date
       * @returns {number} Index of the week of the month (zero-based).
       */
      function getWeekOfMonth(date) {
        var firstDayOfMonth = getFirstDateOfMonth(date);
        return Math.floor((firstDayOfMonth.getDay() + date.getDate() - 1) / 7);
      }
  
      /**
       * Gets a new date incremented by the given number of days. Number of days can be negative.
       * @param {Date} date
       * @param {number} numberOfDays
       * @returns {Date}
       */
      function incrementDays(date, numberOfDays) {
        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + numberOfDays);
      }
  
      /**
       * Gets a new date incremented by the given number of months. Number of months can be negative.
       * If the date of the given month does not match the target month, the date will be set to the
       * last day of the month.
       * @param {Date} date
       * @param {number} numberOfMonths
       * @returns {Date}
       */
      function incrementMonths(date, numberOfMonths) {
        // If the same date in the target month does not actually exist, the Date object will
        // automatically advance *another* month by the number of missing days.
        // For example, if you try to go from Jan. 30 to Feb. 30, you'll end up on March 2.
        // So, we check if the month overflowed and go to the last day of the target month instead.
        var dateInTargetMonth = new Date(date.getFullYear(), date.getMonth() + numberOfMonths, 1);
        var numberOfDaysInMonth = getNumberOfDaysInMonth(dateInTargetMonth);
        if (numberOfDaysInMonth < date.getDate()) {
          dateInTargetMonth.setDate(numberOfDaysInMonth);
        } else {
          dateInTargetMonth.setDate(date.getDate());
        }
  
        return dateInTargetMonth;
      }
  
      /**
       * Get the integer distance between two months. This *only* considers the month and year
       * portion of the Date instances.
       *
       * @param {Date} start
       * @param {Date} end
       * @returns {number} Number of months between `start` and `end`. If `end` is before `start`
       *     chronologically, this number will be negative.
       */
      function getMonthDistance(start, end) {
        return (12 * (end.getFullYear() - start.getFullYear())) + (end.getMonth() - start.getMonth());
      }
  
      /**
       * Gets the last day of the month for the given date.
       * @param {Date} date
       * @returns {Date}
       */
      function getLastDateOfMonth(date) {
        return new Date(date.getFullYear(), date.getMonth(), getNumberOfDaysInMonth(date));
      }
  
      /**
       * Checks whether a date is valid.
       * @param {Date} date
       * @return {boolean} Whether the date is a valid Date.
       */
      function isValidDate(date) {
        return date && date.getTime && !isNaN(date.getTime());
      }
  
      /**
       * Sets a date's time to midnight.
       * @param {Date} date
       */
      function setDateTimeToMidnight(date) {
        if (isValidDate(date)) {
          date.setHours(0, 0, 0, 0);
        }
      }
  
      /**
       * Creates a date with the time set to midnight.
       * Drop-in replacement for two forms of the Date constructor via opt_value.
       * @param {number|Date=} opt_value Leave undefined for a Date representing now. Or use a
       *  single value representing the number of seconds since the Unix Epoch or a Date object.
       * @return {Date} New date with time set to midnight.
       */
      function createDateAtMidnight(opt_value) {
        var date;
        if (angular.isDate(opt_value)) {
          date = opt_value;
        } else if (angular.isNumber(opt_value)) {
          date = new Date(opt_value);
        } else {
          date = new Date();
        }
        setDateTimeToMidnight(date);
        return date;
      }
  
       /**
        * Checks if a date is within a min and max range, ignoring the time component.
        * If minDate or maxDate are not dates, they are ignored.
        * @param {Date} date
        * @param {Date} minDate
        * @param {Date} maxDate
        */
       function isDateWithinRange(date, minDate, maxDate) {
         var dateAtMidnight = createDateAtMidnight(date);
         var minDateAtMidnight = isValidDate(minDate) ? createDateAtMidnight(minDate) : null;
         var maxDateAtMidnight = isValidDate(maxDate) ? createDateAtMidnight(maxDate) : null;
         return (!minDateAtMidnight || minDateAtMidnight <= dateAtMidnight) &&
             (!maxDateAtMidnight || maxDateAtMidnight >= dateAtMidnight);
       }
  
      /**
       * Gets a new date incremented by the given number of years. Number of years can be negative.
       * See `incrementMonths` for notes on overflow for specific dates.
       * @param {Date} date
       * @param {number} numberOfYears
       * @returns {Date}
       */
       function incrementYears(date, numberOfYears) {
         return incrementMonths(date, numberOfYears * 12);
       }
  
       /**
        * Get the integer distance between two years. This *only* considers the year portion of the
        * Date instances.
        *
        * @param {Date} start
        * @param {Date} end
        * @returns {number} Number of months between `start` and `end`. If `end` is before `start`
        *     chronologically, this number will be negative.
        */
       function getYearDistance(start, end) {
         return end.getFullYear() - start.getFullYear();
       }
  
       /**
        * Clamps a date between a minimum and a maximum date.
        * @param {Date} date Date to be clamped
        * @param {Date=} minDate Minimum date
        * @param {Date=} maxDate Maximum date
        * @return {Date}
        */
       function clampDate(date, minDate, maxDate) {
         var boundDate = date;
         if (minDate && date < minDate) {
           boundDate = new Date(minDate.getTime());
         }
         if (maxDate && date > maxDate) {
           boundDate = new Date(maxDate.getTime());
         }
         return boundDate;
       }
  
       /**
        * Extracts and parses the timestamp from a DOM node.
        * @param  {HTMLElement} node Node from which the timestamp will be extracted.
        * @return {number} Time since epoch.
        */
       function getTimestampFromNode(node) {
         if (node && node.hasAttribute('data-timestamp')) {
           return Number(node.getAttribute('data-timestamp'));
         }
       }
  
       /**
        * Checks if a month is within a min and max range, ignoring the date and time components.
        * If minDate or maxDate are not dates, they are ignored.
        * @param {Date} date
        * @param {Date} minDate
        * @param {Date} maxDate
        */
       function isMonthWithinRange(date, minDate, maxDate) {
         var month = date.getMonth();
         var year = date.getFullYear();
  
         return (!minDate || minDate.getFullYear() < year || minDate.getMonth() <= month) &&
          (!maxDate || maxDate.getFullYear() > year || maxDate.getMonth() >= month);
       }
  
      /**
       * @param {Date} value date in local timezone
       * @return {Date} date with local timezone offset removed
       */
      function removeLocalTzAndReparseDate(value) {
        var dateValue, formattedDate;
        // Remove the local timezone offset before calling formatDate.
        dateValue = new Date(value.getTime() + 60000 * value.getTimezoneOffset());
        formattedDate = $mdDateLocale.formatDate(dateValue);
        // parseDate only works with a date formatted by formatDate when using Moment validation.
        return $mdDateLocale.parseDate(formattedDate);
      }
    }]);
  })();
  
  (function() {
    'use strict';
  
    // TODO(jelbourn): forward more attributes to the internal input (required, autofocus, etc.)
    // TODO(jelbourn): something better for mobile (calendar panel takes up entire screen?)
    // TODO(jelbourn): input behavior (masking? auto-complete?)
  
    DatePickerCtrl['$inject'] = ["$scope", "$element", "$attrs", "$window", "$mdConstant", "$mdTheming", "$mdUtil", "$mdDateLocale", "$$mdDateUtil", "$$rAF", "$filter", "$timeout"];
    datePickerDirective['$inject'] = ["$$mdSvgRegistry", "$mdUtil", "$mdAria", "inputDirective"];
    angular.module('material.components.datepicker')
        .directive('mdDatepicker', datePickerDirective);
  
    /**
     * @ngdoc directive
     * @name mdDatepicker
     * @module material.components.datepicker
     *
     * @param {Date} ng-model The component's model. Expects either a JavaScript Date object or a
     *  value that can be parsed into one (e.g. a ISO 8601 string).
     * @param {Object=} ng-model-options Allows tuning of the way in which `ng-model` is being
     *  updated. Also allows for a timezone to be specified.
     *  <a href="https://docs.angularjs.org/api/ng/directive/ngModelOptions#usage">
     *    Read more at the ngModelOptions docs.</a>
     * @param {expression=} ng-change Expression evaluated when the model value changes.
     * @param {expression=} ng-focus Expression evaluated when the input is focused or the calendar
     *  is opened.
     * @param {expression=} ng-blur Expression evaluated when focus is removed from the input or the
     *  calendar is closed.
     * @param {boolean=} ng-disabled Whether the datepicker is disabled.
     * @param {boolean=} ng-required Whether a value is required for the datepicker.
     * @param {Date=} md-min-date Expression representing a min date (inclusive).
     * @param {Date=} md-max-date Expression representing a max date (inclusive).
     * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a
     *  boolean whether it can be selected in "day" mode or not. Returning false will also trigger a
     *  `filtered` model validation error.
     * @param {(function(Date): boolean)=} md-month-filter Function expecting a date and returning a
     *  boolean whether it can be selected in "month" mode or not. Returning false will also trigger a
     *  `filtered` model validation error.
     * @param {String=} md-placeholder The date input placeholder value.
     * @param {String=} md-open-on-focus When present, the calendar will be opened when the input
     *  is focused.
     * @param {Boolean=} md-is-open Expression that can be used to open the datepicker's calendar
     *  on-demand.
     * @param {String=} md-current-view Default open view of the calendar pane. Can be either
     *  "month" or "year".
     * @param {String=} md-mode Restricts the user to only selecting a value from a particular view.
     *  This option can be used if the user is only supposed to choose from a certain date type
     *  (e.g. only selecting the month).
     * Can be either "month" or "day". **Note** that this will overwrite the `md-current-view` value.
     *
     * @param {String=} md-hide-icons Determines which datepicker icons should be hidden. Note that
     *  this may cause the datepicker to not align properly with other components.
     *  **Use at your own risk.** Possible values are:
     * * `"all"` - Hides all icons.
     * * `"calendar"` - Only hides the calendar icon.
     * * `"triangle"` - Only hides the triangle icon.
     * @param {Object=} md-date-locale Allows for the values from the `$mdDateLocaleProvider` to be
     * overwritten on a per-element basis (e.g. `msgOpenCalendar` can be overwritten with
     * `md-date-locale="{ msgOpenCalendar: 'Open a special calendar' }"`).
     *
     * @description
     * `<md-datepicker>` is a component used to select a single date.
     * For information on how to configure internationalization for the date picker,
     * see <a ng-href="api/service/$mdDateLocaleProvider">$mdDateLocaleProvider</a>.
     *
     * This component supports
     * [ngMessages](https://docs.angularjs.org/api/ngMessages/directive/ngMessages).
     * Supported attributes are:
     * * `required`: whether a required date is not set.
     * * `mindate`: whether the selected date is before the minimum allowed date.
     * * `maxdate`: whether the selected date is after the maximum allowed date.
     * * `debounceInterval`: ms to delay input processing (since last debounce reset);
     *    default value 500ms
     *
     * @usage
     * <hljs lang="html">
     *   <md-datepicker ng-model="birthday"></md-datepicker>
     * </hljs>
     *
     */
  
    function datePickerDirective($$mdSvgRegistry, $mdUtil, $mdAria, inputDirective) {
      return {
        template: function(tElement, tAttrs) {
          // Buttons are not in the tab order because users can open the calendar via keyboard
          // interaction on the text input, and multiple tab stops for one component (picker)
          // may be confusing.
          var hiddenIcons = tAttrs.mdHideIcons;
          var ariaLabelValue = tAttrs.ariaLabel || tAttrs.mdPlaceholder;
          var ngModelOptions = tAttrs.ngModelOptions;
  
          var calendarButton = (hiddenIcons === 'all' || hiddenIcons === 'calendar') ? '' :
            '<md-button class="md-datepicker-button md-icon-button" type="button" ' +
                'tabindex="-1" aria-hidden="true" ' +
                'ng-click="ctrl.openCalendarPane($event)">' +
              '<md-icon class="md-datepicker-calendar-icon" aria-label="md-calendar" ' +
                       'md-svg-src="' + $$mdSvgRegistry.mdCalendar + '"></md-icon>' +
            '</md-button>';
  
          var triangleButton = '';
  
          if (hiddenIcons !== 'all' && hiddenIcons !== 'triangle') {
            triangleButton = '' +
              '<md-button type="button" md-no-ink ' +
                'class="md-datepicker-triangle-button md-icon-button" ' +
                'ng-click="ctrl.openCalendarPane($event)" ' +
                'aria-label="{{::ctrl.locale.msgOpenCalendar}}">' +
              '<div class="md-datepicker-expand-triangle"></div>' +
            '</md-button>';
  
            tElement.addClass(HAS_TRIANGLE_ICON_CLASS);
          }
  
          return calendarButton +
          '<div class="md-datepicker-input-container" ng-class="{\'md-datepicker-focused\': ctrl.isFocused}">' +
            '<input ' +
              (ariaLabelValue ? 'aria-label="' + ariaLabelValue + '" ' : '') +
              'class="md-datepicker-input" ' +
              'aria-haspopup="dialog" ' +
              'ng-focus="ctrl.setFocused(true)" ' +
              'ng-blur="ctrl.setFocused(false)"> ' +
              triangleButton +
          '</div>' +
  
          // This pane will be detached from here and re-attached to the document body.
          '<div class="md-datepicker-calendar-pane md-whiteframe-z1" id="{{::ctrl.calendarPaneId}}">' +
            '<div class="md-datepicker-input-mask">' +
              '<div class="md-datepicker-input-mask-opaque"></div>' +
            '</div>' +
            '<div class="md-datepicker-calendar">' +
              '<md-calendar role="dialog" aria-label="{{::ctrl.locale.msgCalendar}}" ' +
                  'md-current-view="{{::ctrl.currentView}}" ' +
                  'md-mode="{{::ctrl.mode}}" ' +
                  'md-min-date="ctrl.minDate" ' +
                  'md-max-date="ctrl.maxDate" ' +
                  'md-date-filter="ctrl.dateFilter" ' +
                  'md-month-filter="ctrl.monthFilter" ' +
                  (ngModelOptions ? 'ng-model-options="' + ngModelOptions + '" ' : '') +
                  'ng-model="ctrl.date" ng-if="ctrl.isCalendarOpen">' +
              '</md-calendar>' +
            '</div>' +
          '</div>';
        },
        require: ['ngModel', 'mdDatepicker', '?^mdInputContainer', '?^form'],
        scope: {
          minDate: '=mdMinDate',
          maxDate: '=mdMaxDate',
          placeholder: '@mdPlaceholder',
          currentView: '@mdCurrentView',
          mode: '@mdMode',
          dateFilter: '=mdDateFilter',
          monthFilter: '=mdMonthFilter',
          isOpen: '=?mdIsOpen',
          debounceInterval: '=mdDebounceInterval',
          dateLocale: '=mdDateLocale'
        },
        controller: DatePickerCtrl,
        controllerAs: 'ctrl',
        bindToController: true,
        link: function(scope, element, attr, controllers) {
          var ngModelCtrl = controllers[0];
          var mdDatePickerCtrl = controllers[1];
          var mdInputContainer = controllers[2];
          var parentForm = controllers[3];
          var mdNoAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk);
  
          mdDatePickerCtrl.configureNgModel(ngModelCtrl, mdInputContainer, inputDirective);
  
          if (mdInputContainer) {
            // We need to move the spacer after the datepicker itself,
            // because md-input-container adds it after the
            // md-datepicker-input by default. The spacer gets wrapped in a
            // div, because it floats and gets aligned next to the datepicker.
            // There are easier ways of working around this with CSS (making the
            // datepicker 100% wide, change the `display` etc.), however they
            // break the alignment with any other form controls.
            var spacer = element[0].querySelector('.md-errors-spacer');
  
            if (spacer) {
              element.after(angular.element('<div>').append(spacer));
            }
  
            mdInputContainer.setHasPlaceholder(attr.mdPlaceholder);
            mdInputContainer.input = element;
            mdInputContainer.element
              .addClass(INPUT_CONTAINER_CLASS)
              .toggleClass(HAS_CALENDAR_ICON_CLASS,
                attr.mdHideIcons !== 'calendar' && attr.mdHideIcons !== 'all');
  
            if (!mdInputContainer.label) {
              $mdAria.expect(element, 'aria-label', attr.mdPlaceholder);
            } else if (!mdNoAsterisk) {
              attr.$observe('required', function(value) {
                mdInputContainer.label.toggleClass('md-required', !!value);
              });
            }
  
            scope.$watch(mdInputContainer.isErrorGetter || function() {
              return ngModelCtrl.$invalid && (ngModelCtrl.$touched ||
                (parentForm && parentForm.$submitted));
            }, mdInputContainer.setInvalid);
          } else if (parentForm) {
            // If invalid, highlights the input when the parent form is submitted.
            var parentSubmittedWatcher = scope.$watch(function() {
              return parentForm.$submitted;
            }, function(isSubmitted) {
              if (isSubmitted) {
                mdDatePickerCtrl.updateErrorState();
                parentSubmittedWatcher();
              }
            });
          }
        }
      };
    }
  
    /** Additional offset for the input's `size` attribute, which is updated based on its content. */
    var EXTRA_INPUT_SIZE = 3;
  
    /** Class applied to the container if the date is invalid. */
    var INVALID_CLASS = 'md-datepicker-invalid';
  
    /** Class applied to the datepicker when it's open. */
    var OPEN_CLASS = 'md-datepicker-open';
  
    /** Class applied to the md-input-container, if a datepicker is placed inside it */
    var INPUT_CONTAINER_CLASS = '_md-datepicker-floating-label';
  
    /** Class to be applied when the calendar icon is enabled. */
    var HAS_CALENDAR_ICON_CLASS = '_md-datepicker-has-calendar-icon';
  
    /** Class to be applied when the triangle icon is enabled. */
    var HAS_TRIANGLE_ICON_CLASS = '_md-datepicker-has-triangle-icon';
  
    /** Default time in ms to debounce input event by. */
    var DEFAULT_DEBOUNCE_INTERVAL = 500;
  
    /**
     * Height of the calendar pane used to check if the pane is going outside the boundary of
     * the viewport. See calendar.scss for how $md-calendar-height is computed; an extra 20px is
     * also added to space the pane away from the exact edge of the screen.
     *
     *  This is computed statically now, but can be changed to be measured if the circumstances
     *  of calendar sizing are changed.
     */
    var CALENDAR_PANE_HEIGHT = 368;
  
    /**
     * Width of the calendar pane used to check if the pane is going outside the boundary of
     * the viewport. See calendar.scss for how $md-calendar-width is computed; an extra 20px is
     * also added to space the pane away from the exact edge of the screen.
     *
     *  This is computed statically now, but can be changed to be measured if the circumstances
     *  of calendar sizing are changed.
     */
    var CALENDAR_PANE_WIDTH = 360;
  
    /** Used for checking whether the current user agent is on iOS or Android. */
    var IS_MOBILE_REGEX = /ipad|iphone|ipod|android/i;
  
    /**
     * Controller for md-datepicker.
     *
     * ngInject @constructor
     */
    function DatePickerCtrl($scope, $element, $attrs, $window, $mdConstant, $mdTheming, $mdUtil,
                            $mdDateLocale, $$mdDateUtil, $$rAF, $filter, $timeout) {
  
      /** @final */
      this.$window = $window;
  
      /** @final */
      this.dateUtil = $$mdDateUtil;
  
      /** @final */
      this.$mdConstant = $mdConstant;
  
      /** @final */
      this.$mdUtil = $mdUtil;
  
      /** @final */
      this.$$rAF = $$rAF;
  
      /** @final */
      this.$mdDateLocale = $mdDateLocale;
  
      /** @final */
      this.$timeout = $timeout;
  
      /**
       * The root document element. This is used for attaching a top-level click handler to
       * close the calendar panel when a click outside said panel occurs. We use `documentElement`
       * instead of body because, when scrolling is disabled, some browsers consider the body element
       * to be completely off the screen and propagate events directly to the html element.
       * @type {!JQLite}
       */
      this.documentElement = angular.element(document.documentElement);
  
      /** @type {!ngModel.NgModelController} */
      this.ngModelCtrl = null;
  
      /** @type {HTMLInputElement} */
      this.inputElement = $element[0].querySelector('input');
  
      /**
       * @final
       * @type {!JQLite}
       */
      this.ngInputElement = angular.element(this.inputElement);
  
      /** @type {HTMLElement} */
      this.inputContainer = $element[0].querySelector('.md-datepicker-input-container');
  
      /** @type {HTMLElement} Floating calendar pane. */
      this.calendarPane = $element[0].querySelector('.md-datepicker-calendar-pane');
  
      /** @type {HTMLElement} Calendar icon button. */
      this.calendarButton = $element[0].querySelector('.md-datepicker-button');
  
      /**
       * Element covering everything but the input in the top of the floating calendar pane.
       * @type {!JQLite}
       */
      this.inputMask = angular.element($element[0].querySelector('.md-datepicker-input-mask-opaque'));
  
      /**
       * @final
       * @type {!JQLite}
       */
      this.$element = $element;
  
      /**
       * @final
       * @type {!angular.Attributes}
       */
      this.$attrs = $attrs;
  
      /**
       * @final
       * @type {!angular.Scope}
       */
      this.$scope = $scope;
  
      /**
       * This holds the model that will be used by the calendar.
       * @type {Date|null|undefined}
       */
      this.date = null;
  
      /** @type {boolean} */
      this.isFocused = false;
  
      /** @type {boolean} */
      this.isDisabled = undefined;
      this.setDisabled($element[0].disabled || angular.isString($attrs.disabled));
  
      /** @type {boolean} Whether the date-picker's calendar pane is open. */
      this.isCalendarOpen = false;
  
      /** @type {boolean} Whether the calendar should open when the input is focused. */
      this.openOnFocus = $attrs.hasOwnProperty('mdOpenOnFocus');
  
      /** @type {Object} Instance of the mdInputContainer controller */
      this.mdInputContainer = null;
  
      /**
       * Element from which the calendar pane was opened. Keep track of this so that we can return
       * focus to it when the pane is closed.
       * @type {HTMLElement}
       */
      this.calendarPaneOpenedFrom = null;
  
      /** @type {String} Unique id for the calendar pane. */
      this.calendarPaneId = 'md-date-pane-' + $mdUtil.nextUid();
  
      /** Pre-bound click handler is saved so that the event listener can be removed. */
      this.bodyClickHandler = angular.bind(this, this.handleBodyClick);
  
      /**
       * Name of the event that will trigger a close. Necessary to sniff the browser, because
       * the resize event doesn't make sense on mobile and can have a negative impact since it
       * triggers whenever the browser zooms in on a focused input.
       */
      this.windowEventName = IS_MOBILE_REGEX.test(
        navigator.userAgent || navigator.vendor || window.opera
      ) ? 'orientationchange' : 'resize';
  
      /** Pre-bound close handler so that the event listener can be removed. */
      this.windowEventHandler = $mdUtil.debounce(angular.bind(this, this.closeCalendarPane), 100);
  
      /** Pre-bound handler for the window blur event. Allows for it to be removed later. */
      this.windowBlurHandler = angular.bind(this, this.handleWindowBlur);
  
      /** The built-in AngularJS date filter. */
      this.ngDateFilter = $filter('date');
  
      /** @type {Number} Extra margin for the left side of the floating calendar pane. */
      this.leftMargin = 20;
  
      /** @type {Number} Extra margin for the top of the floating calendar. Gets determined on the first open. */
      this.topMargin = null;
  
      // Unless the user specifies so, the datepicker should not be a tab stop.
      // This is necessary because ngAria might add a tabindex to anything with an ng-model
      // (based on whether or not the user has turned that particular feature on/off).
      if ($attrs.tabindex) {
        this.ngInputElement.attr('tabindex', $attrs.tabindex);
        $attrs.$set('tabindex', null);
      } else {
        $attrs.$set('tabindex', '-1');
      }
  
      $attrs.$set('aria-owns', this.calendarPaneId);
  
      $mdTheming($element);
      $mdTheming(angular.element(this.calendarPane));
  
      var self = this;
  
      $scope.$on('$destroy', function() {
        self.detachCalendarPane();
      });
  
      if ($attrs.mdIsOpen) {
        $scope.$watch('ctrl.isOpen', function(shouldBeOpen) {
          if (shouldBeOpen) {
            self.openCalendarPane({
              target: self.inputElement
            });
          } else {
            self.closeCalendarPane();
          }
        });
      }
  
      // For AngularJS 1.4 and older, where there are no lifecycle hooks but bindings are
      // pre-assigned, manually call the $onInit hook.
      if (angular.version.major === 1 && angular.version.minor <= 4) {
        this.$onInit();
      }
    }
  
    /**
     * AngularJS Lifecycle hook for newer AngularJS versions.
     * Bindings are not guaranteed to have been assigned in the controller, but they are in the
     * $onInit hook.
     */
    DatePickerCtrl.prototype.$onInit = function() {
  
      /**
       * Holds locale-specific formatters, parsers, labels etc. Allows
       * the user to override specific ones from the $mdDateLocale provider.
       * @type {!Object}
       */
      this.locale = this.dateLocale ? angular.extend({}, this.$mdDateLocale, this.dateLocale)
        : this.$mdDateLocale;
  
      this.installPropertyInterceptors();
      this.attachChangeListeners();
      this.attachInteractionListeners();
    };
  
    /**
     * Sets up the controller's reference to ngModelController and
     * applies AngularJS's `input[type="date"]` directive.
     * @param {!angular.NgModelController} ngModelCtrl Instance of the ngModel controller.
     * @param {Object} mdInputContainer Instance of the mdInputContainer controller.
     * @param {Object} inputDirective Config for AngularJS's `input` directive.
     */
    DatePickerCtrl.prototype.configureNgModel = function(ngModelCtrl, mdInputContainer, inputDirective) {
      this.ngModelCtrl = ngModelCtrl;
      this.mdInputContainer = mdInputContainer;
  
      // The input needs to be [type="date"] in order to be picked up by AngularJS.
      this.$attrs.$set('type', 'date');
  
      // Invoke the `input` directive link function, adding a stub for the element.
      // This allows us to re-use AngularJS's logic for setting the timezone via ng-model-options.
      // It works by calling the link function directly which then adds the proper `$parsers` and
      // `$formatters` to the ngModel controller.
      inputDirective[0].link.pre(this.$scope, {
        on: angular.noop,
        val: angular.noop,
        0: {}
      }, this.$attrs, [ngModelCtrl]);
  
      var self = this;
  
      // Responds to external changes to the model value.
      self.ngModelCtrl.$formatters.push(function(value) {
        var parsedValue = angular.isDefined(value) ? value : null;
  
        if (!(value instanceof Date)) {
          parsedValue = Date.parse(value);
  
          // `parsedValue` is the time since epoch if valid or `NaN` if invalid.
          if (!isNaN(parsedValue) && angular.isNumber(parsedValue)) {
            value = new Date(parsedValue);
          }
  
          if (value && !(value instanceof Date)) {
            throw Error(
              'The ng-model for md-datepicker must be a Date instance or a value ' +
                'that can be parsed into a date. Currently the model is of type: ' + typeof value
            );
          }
        }
  
        self.onExternalChange(value);
  
        return value;
      });
  
      // Responds to external error state changes (e.g. ng-required based on another input).
      ngModelCtrl.$viewChangeListeners.unshift(angular.bind(this, this.updateErrorState));
  
      // Forwards any events from the input to the root element. This is necessary to get `updateOn`
      // working for events that don't bubble (e.g. 'blur') since AngularJS binds the handlers to
      // the `<md-datepicker>`.
      var updateOn = self.$mdUtil.getModelOption(ngModelCtrl, 'updateOn');
  
      if (updateOn) {
        this.ngInputElement.on(
          updateOn,
          angular.bind(this.$element, this.$element.triggerHandler, updateOn)
        );
      }
    };
  
    /**
     * Attach event listeners for both the text input and the md-calendar.
     * Events are used instead of ng-model so that updates don't infinitely update the other
     * on a change. This should also be more performant than using a $watch.
     */
    DatePickerCtrl.prototype.attachChangeListeners = function() {
      var self = this;
  
      self.$scope.$on('md-calendar-change', function(event, date) {
        self.setModelValue(date);
        self.onExternalChange(date);
        self.closeCalendarPane();
      });
  
      self.ngInputElement.on('input', angular.bind(self, self.resizeInputElement));
  
      var debounceInterval = angular.isDefined(this.debounceInterval) ?
          this.debounceInterval : DEFAULT_DEBOUNCE_INTERVAL;
      self.ngInputElement.on('input', self.$mdUtil.debounce(self.handleInputEvent,
          debounceInterval, self));
    };
  
    /** Attach event listeners for user interaction. */
    DatePickerCtrl.prototype.attachInteractionListeners = function() {
      var self = this;
      var $scope = this.$scope;
      var keyCodes = this.$mdConstant.KEY_CODE;
  
      // Add event listener through angular so that we can triggerHandler in unit tests.
      self.ngInputElement.on('keydown', function(event) {
        if (event.altKey && event.keyCode === keyCodes.DOWN_ARROW) {
          self.openCalendarPane(event);
          $scope.$digest();
        }
      });
  
      if (self.openOnFocus) {
        self.ngInputElement.on('focus', angular.bind(self, self.openCalendarPane));
        self.ngInputElement.on('click', function(event) {
          event.stopPropagation();
        });
        self.ngInputElement.on('pointerdown',function(event) {
          if (event.target && event.target.setPointerCapture) {
            event.target.setPointerCapture(event.pointerId);
          }
        });
  
        angular.element(self.$window).on('blur', self.windowBlurHandler);
  
        $scope.$on('$destroy', function() {
          angular.element(self.$window).off('blur', self.windowBlurHandler);
        });
      }
  
      $scope.$on('md-calendar-close', function() {
        self.closeCalendarPane();
      });
    };
  
    /**
     * Capture properties set to the date-picker and imperatively handle internal changes.
     * This is done to avoid setting up additional $watches.
     */
    DatePickerCtrl.prototype.installPropertyInterceptors = function() {
      var self = this;
  
      if (this.$attrs.ngDisabled) {
        // The expression is to be evaluated against the directive element's scope and not
        // the directive's isolate scope.
        var scope = this.$scope.$parent;
  
        if (scope) {
          scope.$watch(this.$attrs.ngDisabled, function(isDisabled) {
            self.setDisabled(isDisabled);
          });
        }
      }
  
      Object.defineProperty(this, 'placeholder', {
        get: function() { return self.inputElement.placeholder; },
        set: function(value) { self.inputElement.placeholder = value || ''; }
      });
    };
  
    /**
     * Sets whether the date-picker is disabled.
     * @param {boolean} isDisabled
     */
    DatePickerCtrl.prototype.setDisabled = function(isDisabled) {
      this.isDisabled = isDisabled;
      this.inputElement.disabled = isDisabled;
  
      if (this.calendarButton) {
        this.calendarButton.disabled = isDisabled;
      }
    };
  
    /**
     * Sets the custom ngModel.$error flags to be consumed by ngMessages. Flags are:
     *   - mindate: whether the selected date is before the minimum date.
     *   - maxdate: whether the selected flag is after the maximum date.
     *   - filtered: whether the selected date is allowed by the custom filtering function.
     *   - valid: whether the entered text input is a valid date
     *
     * The 'required' flag is handled automatically by ngModel.
     *
     * @param {Date=} opt_date Date to check. If not given, defaults to the datepicker's model value.
     */
    DatePickerCtrl.prototype.updateErrorState = function(opt_date) {
      var date;
      if (opt_date) {
        date = new Date(opt_date.valueOf());
      } else {
        date = angular.copy(this.ngModelCtrl.$modelValue);
      }
  
      // Clear any existing errors to get rid of anything that's no longer relevant.
      this.clearErrorState();
  
      if (this.dateUtil.isValidDate(date)) {
        // Force all dates to midnight in order to ignore the time portion.
        date = this.dateUtil.createDateAtMidnight(date);
  
        if (this.dateUtil.isValidDate(this.minDate)) {
          var minDate = this.dateUtil.createDateAtMidnight(this.minDate);
          this.ngModelCtrl.$setValidity('mindate', date >= minDate);
        }
  
        if (this.dateUtil.isValidDate(this.maxDate)) {
          var maxDate = this.dateUtil.createDateAtMidnight(this.maxDate);
          this.ngModelCtrl.$setValidity('maxdate', date <= maxDate);
        }
  
        if (angular.isFunction(this.dateFilter)) {
          this.ngModelCtrl.$setValidity('filtered', this.dateFilter(date));
        }
  
        if (angular.isFunction(this.monthFilter)) {
          this.ngModelCtrl.$setValidity('filtered', this.monthFilter(date));
        }
      } else {
        // The date is seen as "not a valid date" if there is *something* set
        // (i.e.., not null or undefined), but that something isn't a valid date.
        this.ngModelCtrl.$setValidity('valid', date == null);
      }
  
      var input = this.inputElement.value;
      var parsedDate = this.locale.parseDate(input);
  
      if (!this.isInputValid(input, parsedDate) && this.ngModelCtrl.$valid) {
        this.ngModelCtrl.$setValidity('valid', date == null);
      }
  
      angular.element(this.inputContainer).toggleClass(INVALID_CLASS,
        this.ngModelCtrl.$invalid && (this.ngModelCtrl.$touched || this.ngModelCtrl.$submitted));
    };
  
    /**
     * Check to see if the input is valid, as the validation should fail if the model is invalid.
     *
     * @param {string} inputString
     * @param {Date} parsedDate
     * @return {boolean} Whether the input is valid
     */
    DatePickerCtrl.prototype.isInputValid = function (inputString, parsedDate) {
      return inputString === '' || (
        this.dateUtil.isValidDate(parsedDate) &&
        this.locale.isDateComplete(inputString) &&
        this.isDateEnabled(parsedDate)
      );
    };
  
    /** Clears any error flags set by `updateErrorState`. */
    DatePickerCtrl.prototype.clearErrorState = function() {
      this.inputContainer.classList.remove(INVALID_CLASS);
      ['mindate', 'maxdate', 'filtered', 'valid'].forEach(function(field) {
        this.ngModelCtrl.$setValidity(field, true);
      }, this);
    };
  
    /** Resizes the input element based on the size of its content. */
    DatePickerCtrl.prototype.resizeInputElement = function() {
      this.inputElement.size = this.inputElement.value.length + EXTRA_INPUT_SIZE;
    };
  
    /**
     * Sets the model value if the user input is a valid date.
     * Adds an invalid class to the input element if not.
     */
    DatePickerCtrl.prototype.handleInputEvent = function() {
      var inputString = this.inputElement.value;
      var parsedDate = inputString ? this.locale.parseDate(inputString) : null;
      this.dateUtil.setDateTimeToMidnight(parsedDate);
  
      // An input string is valid if it is either empty (representing no date)
      // or if it parses to a valid date that the user is allowed to select.
      var isValidInput = this.isInputValid(inputString, parsedDate);
  
      // The datepicker's model is only updated when there is a valid input.
      if (isValidInput) {
        this.setModelValue(parsedDate);
        this.date = parsedDate;
      }
  
      this.updateErrorState(parsedDate);
    };
  
    /**
     * Check whether date is in range and enabled
     * @param {Date=} opt_date
     * @return {boolean} Whether the date is enabled.
     */
    DatePickerCtrl.prototype.isDateEnabled = function(opt_date) {
      return this.dateUtil.isDateWithinRange(opt_date, this.minDate, this.maxDate) &&
            (!angular.isFunction(this.dateFilter) || this.dateFilter(opt_date)) &&
            (!angular.isFunction(this.monthFilter) || this.monthFilter(opt_date));
    };
  
    /** Position and attach the floating calendar to the document. */
    DatePickerCtrl.prototype.attachCalendarPane = function() {
      var calendarPane = this.calendarPane;
      var body = document.body;
  
      calendarPane.style.transform = '';
      this.$element.addClass(OPEN_CLASS);
      this.mdInputContainer && this.mdInputContainer.element.addClass(OPEN_CLASS);
      angular.element(body).addClass('md-datepicker-is-showing');
  
      var elementRect = this.inputContainer.getBoundingClientRect();
      var bodyRect = body.getBoundingClientRect();
  
      if (!this.topMargin || this.topMargin < 0) {
        this.topMargin =
          (this.inputMask.parent().prop('clientHeight')
            - this.ngInputElement.prop('clientHeight')) / 2;
      }
  
      // Check to see if the calendar pane would go off the screen. If so, adjust position
      // accordingly to keep it within the viewport.
      var paneTop = elementRect.top - bodyRect.top - this.topMargin;
      var paneLeft = elementRect.left - bodyRect.left - this.leftMargin;
  
      // If ng-material has disabled body scrolling (for example, if a dialog is open),
      // then it's possible that the already-scrolled body has a negative top/left. In this case,
      // we want to treat the "real" top as (0 - bodyRect.top). In a normal scrolling situation,
      // though, the top of the viewport should just be the body's scroll position.
      var viewportTop = (bodyRect.top < 0 && document.body.scrollTop === 0) ?
          -bodyRect.top :
          document.body.scrollTop;
  
      var viewportLeft = (bodyRect.left < 0 && document.body.scrollLeft === 0) ?
          -bodyRect.left :
          document.body.scrollLeft;
  
      var viewportBottom = viewportTop + this.$window.innerHeight;
      var viewportRight = viewportLeft + this.$window.innerWidth;
  
      // Creates an overlay with a hole the same size as element. We remove a pixel or two
      // on each end to make it overlap slightly. The overlay's background is added in
      // the theme in the form of a box-shadow with a huge spread.
      this.inputMask.css({
        position: 'absolute',
        left: this.leftMargin + 'px',
        top: this.topMargin + 'px',
        width: (elementRect.width - 1) + 'px',
        height: (elementRect.height - 2) + 'px'
      });
  
      // If the right edge of the pane would be off the screen and shifting it left by the
      // difference would not go past the left edge of the screen. If the calendar pane is too
      // big to fit on the screen at all, move it to the left of the screen and scale the entire
      // element down to fit.
      if (paneLeft + CALENDAR_PANE_WIDTH > viewportRight) {
        if (viewportRight - CALENDAR_PANE_WIDTH > 0) {
          paneLeft = viewportRight - CALENDAR_PANE_WIDTH;
        } else {
          paneLeft = viewportLeft;
          var scale = this.$window.innerWidth / CALENDAR_PANE_WIDTH;
          calendarPane.style.transform = 'scale(' + scale + ')';
        }
  
        calendarPane.classList.add('md-datepicker-pos-adjusted');
      }
  
      // If the bottom edge of the pane would be off the screen and shifting it up by the
      // difference would not go past the top edge of the screen.
      if (paneTop + CALENDAR_PANE_HEIGHT > viewportBottom &&
          viewportBottom - CALENDAR_PANE_HEIGHT > viewportTop) {
        paneTop = viewportBottom - CALENDAR_PANE_HEIGHT;
        calendarPane.classList.add('md-datepicker-pos-adjusted');
      }
  
      calendarPane.style.left = paneLeft + 'px';
      calendarPane.style.top = paneTop + 'px';
      document.body.appendChild(calendarPane);
  
      // Add CSS class after one frame to trigger open animation.
      this.$$rAF(function() {
        calendarPane.classList.add('md-pane-open');
      });
    };
  
    /** Detach the floating calendar pane from the document. */
    DatePickerCtrl.prototype.detachCalendarPane = function() {
      this.$element.removeClass(OPEN_CLASS);
      this.mdInputContainer && this.mdInputContainer.element.removeClass(OPEN_CLASS);
      angular.element(document.body).removeClass('md-datepicker-is-showing');
      this.calendarPane.classList.remove('md-pane-open');
      this.calendarPane.classList.remove('md-datepicker-pos-adjusted');
  
      if (this.isCalendarOpen) {
        this.$mdUtil.enableScrolling();
      }
  
      if (this.calendarPane.parentNode) {
        // 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.
     * @param {MouseEvent|KeyboardEvent|{target: HTMLInputElement}} event
     */
    DatePickerCtrl.prototype.openCalendarPane = function(event) {
      if (!this.isCalendarOpen && !this.isDisabled && !this.inputFocusedOnWindowBlur) {
        this.isCalendarOpen = this.isOpen = true;
        this.calendarPaneOpenedFrom = event.target;
  
        // Because the calendar pane is attached directly to the body, it is possible that the
        // rest of the component (input, etc) is in a different scrolling container, such as
        // an md-content. This means that, if the container is scrolled, the pane would remain
        // stationary. To remedy this, we disable scrolling while the calendar pane is open, which
        // also matches the native behavior for things like `<select>` on Mac and Windows.
        this.$mdUtil.disableScrollAround(this.calendarPane);
  
        this.attachCalendarPane();
        this.focusCalendar();
        this.evalAttr('ngFocus');
  
        // 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 propagated up to the body and handled.
        var self = this;
        this.$mdUtil.nextTick(function() {
          // Use 'touchstart` in addition to click in order to work on iOS Safari, where click
          // events aren't propagated under most circumstances.
          // See http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
          self.documentElement.on('click touchstart', self.bodyClickHandler);
        }, false);
  
        window.addEventListener(this.windowEventName, this.windowEventHandler);
      } else if (this.inputFocusedOnWindowBlur) {
        this.resetInputFocused();
      }
    };
  
    /** Close the floating calendar pane. */
    DatePickerCtrl.prototype.closeCalendarPane = function() {
      if (this.isCalendarOpen) {
        var self = this;
  
        self.detachCalendarPane();
        self.ngModelCtrl.$setTouched();
        self.evalAttr('ngBlur');
  
        self.documentElement.off('click touchstart', self.bodyClickHandler);
        window.removeEventListener(self.windowEventName, self.windowEventHandler);
  
        self.calendarPaneOpenedFrom.focus();
        self.calendarPaneOpenedFrom = null;
  
        if (self.openOnFocus) {
          // Ensures that all focus events have fired before resetting
          // the calendar. Prevents the calendar from reopening immediately
          // in IE when md-open-on-focus is set. Also it needs to trigger
          // a digest, in order to prevent issues where the calendar wasn't
          // showing up on the next open.
          self.$timeout(reset);
        } else {
          reset();
        }
      }
  
      function reset() {
        self.isCalendarOpen = self.isOpen = false;
      }
    };
  
    /** 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.$mdUtil.nextTick(function() {
        self.getCalendarCtrl().focusDate(self.date);
      }, false);
    };
  
    /**
     * Sets whether the input is currently focused.
     * @param {boolean} isFocused
     */
    DatePickerCtrl.prototype.setFocused = function(isFocused) {
      if (!isFocused) {
        this.ngModelCtrl.$setTouched();
      }
  
      // The ng* expressions shouldn't be evaluated when mdOpenOnFocus is on,
      // because they also get called when the calendar is opened/closed.
      if (!this.openOnFocus) {
        this.evalAttr(isFocused ? 'ngFocus' : 'ngBlur');
      }
  
      this.isFocused = isFocused;
    };
  
    /**
     * 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();
        }
  
        this.$scope.$digest();
      }
    };
  
    /**
     * Handles the event when the user navigates away from the current tab. Keeps track of
     * whether the input was focused when the event happened, in order to prevent the calendar
     * from re-opening.
     */
    DatePickerCtrl.prototype.handleWindowBlur = function() {
      this.inputFocusedOnWindowBlur = document.activeElement === this.inputElement;
    };
  
    /**
     * Reset the flag inputFocusedOnWindowBlur to default state, to permit user to open calendar
     * again when he back to tab with calendar focused.
     */
    DatePickerCtrl.prototype.resetInputFocused = function() {
      this.inputFocusedOnWindowBlur = false;
    };
  
    /**
     * Evaluates an attribute expression against the parent scope.
     * @param {String} attr Name of the attribute to be evaluated.
     */
    DatePickerCtrl.prototype.evalAttr = function(attr) {
      if (this.$attrs[attr]) {
        this.$scope.$parent.$eval(this.$attrs[attr]);
      }
    };
  
    /**
     * Sets the ng-model value by first converting the date object into a string. Converting it
     * is necessary, in order to pass AngularJS's `input[type="date"]` validations. AngularJS turns
     * the value into a Date object afterwards, before setting it on the model.
     * @param {Date=} value Date to be set as the model value.
     */
    DatePickerCtrl.prototype.setModelValue = function(value) {
      var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone');
      // Using the timezone when the offset is negative (GMT+X) causes the previous day to be
      // set as the model value here. This check avoids that.
      if (timezone == null || value == null || value.getTimezoneOffset() < 0) {
        this.ngModelCtrl.$setViewValue(this.ngDateFilter(value, 'yyyy-MM-dd'), 'default');
      } else {
        this.ngModelCtrl.$setViewValue(this.ngDateFilter(value, 'yyyy-MM-dd', timezone), 'default');
      }
    };
  
    /**
     * Updates the datepicker when a model change occurred externally.
     * @param {Date=} value Value that was set to the model.
     */
    DatePickerCtrl.prototype.onExternalChange = function(value) {
      var self = this;
      var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone');
  
      // Update the model used by the calendar.
      if (this.dateUtil.isValidDate(value) && timezone != null && value.getTimezoneOffset() >= 0) {
        this.date = this.dateUtil.removeLocalTzAndReparseDate(value);
      } else {
        this.date = value;
      }
      // Using the timezone when the offset is negative (GMT+X) causes the previous day to be
      // used here. This check avoids that.
      if (timezone == null || value == null || value.getTimezoneOffset() < 0) {
        this.inputElement.value = this.locale.formatDate(value);
      } else {
        this.inputElement.value = this.locale.formatDate(value, timezone);
      }
      this.mdInputContainer && this.mdInputContainer.setHasValue(!!value);
      this.resizeInputElement();
      // This is often called from the $formatters section of the $validators pipeline.
      // In that case, we need to delay to let $render and $validate run, so that the checks for
      // error state are accurate.
      this.$mdUtil.nextTick(function() {self.updateErrorState();}, false, self.$scope);
    };
  })();
  
  })(window, window.angular);