feat(datepicker): allow users to specify the default calendar view

* Allows users to set the default open view of the calendar via the `md-current-view` attribute.
* Removes a few unused dependencies from the datepicker.

Fixes #9111.

Closes #9113

Author: crisbeto

src/components/datepicker/js/calendar.js

@@ -57,7 +57,8 @@
       scope: {
         minDate: '=mdMinDate',
         maxDate: '=mdMaxDate',
-        dateFilter: '=mdDateFilter'
+        dateFilter: '=mdDateFilter',
+        _currentView: '@mdCurrentView'
       },
       require: ['ngModel', 'mdCalendar'],
       controller: CalendarCtrl,
@@ -116,8 +117,13 @@
     /** @type {!angular.NgModelController} */
     this.ngModelCtrl = null;
 
-    /** @type {String} The currently visible calendar view. */
-    this.currentView = 'month';
+    /**
+     * 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 value on the datepicker's scope is empty.
+     * @type {String}
+     */
+    this.currentView = this._currentView || 'month';
 
     /** @type {String} Class applied to the selected date cell. */
     this.SELECTED_DATE_CLASS = 'md-calendar-selected-date';

src/components/datepicker/js/calendar.spec.js

@@ -93,9 +93,9 @@ describe('md-calendar', function() {
   }
 
   /** Creates and compiles an md-calendar element. */
-  function createElement(parentScope) {
+  function createElement(parentScope, templateOverride) {
     var directiveScope = parentScope || $rootScope.$new();
-    var template = '<md-calendar md-min-date="minDate" md-max-date="maxDate" ' +
+    var template = templateOverride || '<md-calendar md-min-date="minDate" md-max-date="maxDate" ' +
         'ng-model="myDate"></md-calendar>';
     var attachedElement = angular.element(template);
     document.body.appendChild(attachedElement[0]);
@@ -707,4 +707,12 @@ describe('md-calendar', function() {
       }
     }
   });
+
+  it('should have a configurable default view', function() {
+    ngElement.remove();
+    var calendar = createElement(null, '<md-calendar ng-model="myDate" md-current-view="year"></md-calendar>')[0];
+
+    expect(calendar.querySelector('md-calendar-month')).toBeFalsy();
+    expect(calendar.querySelector('md-calendar-year')).toBeTruthy();
+  });
 });

src/components/datepicker/js/datepickerDirective.js

@@ -27,6 +27,7 @@
    * @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-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.
@@ -93,7 +94,9 @@
           '</div>' +
           '<div class="md-datepicker-calendar">' +
             '<md-calendar role="dialog" aria-label="{{::ctrl.dateLocale.msgCalendar}}" ' +
-                'md-min-date="ctrl.minDate" md-max-date="ctrl.maxDate"' +
+                'md-current-view="{{::ctrl.currentView}}"' +
+                'md-min-date="ctrl.minDate"' +
+                'md-max-date="ctrl.maxDate"' +
                 'md-date-filter="ctrl.dateFilter"' +
                 'ng-model="ctrl.date" ng-if="ctrl.isCalendarOpen">' +
             '</md-calendar>' +
@@ -105,6 +108,7 @@
         minDate: '=mdMinDate',
         maxDate: '=mdMaxDate',
         placeholder: '@mdPlaceholder',
+        currentView: '@mdCurrentView',
         dateFilter: '=mdDateFilter',
         isOpen: '=?mdIsOpen',
         debounceInterval: '=mdDebounceInterval'
@@ -205,13 +209,8 @@
    *
    * @ngInject @constructor
    */
-  function DatePickerCtrl($scope, $element, $attrs, $compile, $timeout, $window,
-      $mdConstant, $mdTheming, $mdUtil, $mdDateLocale, $$mdDateUtil, $$rAF) {
-    /** @final */
-    this.$compile = $compile;
-
-    /** @final */
-    this.$timeout = $timeout;
+  function DatePickerCtrl($scope, $element, $attrs, $window, $mdConstant,
+    $mdTheming, $mdUtil, $mdDateLocale, $$mdDateUtil, $$rAF) {
 
     /** @final */
     this.$window = $window;