feat(datepicker): add indicator that month headers are clickable

Adds an indicator to the month headers, showing the users that the header is clickable.

Fixes #9128.

Closes #9142

Author: crisbeto

src/components/datepicker/calendar.scss

@@ -131,6 +131,14 @@ md-calendar {
   md-calendar-month &:not(.md-calendar-month-label-disabled) {
     cursor: pointer;
   }
+
+  md-icon {
+    transform: rotate(180deg);
+  }
+
+  span {
+    vertical-align: middle;
+  }
 }
 
 // Table containing the day-of-the-week header.

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

@@ -225,7 +225,7 @@ describe('md-calendar', function() {
         });
 
         var expectedDates = [
-          ['May 2014', '', '', '1', '2', '3'],
+          ['May 2014', '', '1', '2', '3'],
           ['4', '5', '6', '7', '8', '9', '10'],
           ['11', '12', '13', '14', '15', '16', '17'],
           ['18', '19', '20', '21', '22', '23', '24'],
@@ -248,7 +248,7 @@ describe('md-calendar', function() {
         });
 
         var expectedDates = [
-          ['May 2014', '', '1', '2', '3', '4'],
+          ['May 2014', '1', '2', '3', '4'],
           ['5', '6', '7', '8', '9', '10', '11'],
           ['12', '13', '14', '15', '16', '17', '18'],
           ['19', '20', '21', '22', '23', '24', '25'],

src/components/datepicker/js/calendarMonthBody.js

@@ -8,8 +8,12 @@
    * 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() {
+  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' },
@@ -23,14 +27,15 @@
 
         monthBodyCtrl.calendarCtrl = calendarCtrl;
         monthBodyCtrl.monthCtrl = monthCtrl;
+        monthBodyCtrl.arrowIcon = ARROW_ICON.cloneNode(true);
         monthBodyCtrl.generateContent();
 
         // 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 updataed.
+        // 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, oldOffset) {
-          if (offset != oldOffset) {
+          if (offset !== oldOffset) {
             monthBodyCtrl.generateContent();
           }
         });
@@ -203,7 +208,10 @@
     // two cells of the first row.
     var blankCellOffset = 0;
     var monthLabelCell = document.createElement('td');
-    monthLabelCell.textContent = this.dateLocale.monthHeaderFormatter(date);
+    var monthLabelCellContent = document.createElement('span');
+
+    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 (this.calendarCtrl.maxDate && firstDayOfMonth > this.calendarCtrl.maxDate) {
@@ -212,6 +220,7 @@
       monthLabelCell.addEventListener('click', this.monthCtrl.headerClickHandler);
       monthLabelCell.setAttribute('data-timestamp', firstDayOfMonth.getTime());
       monthLabelCell.setAttribute('aria-label', this.dateLocale.monthFormatter(date));
+      monthLabelCell.appendChild(this.arrowIcon.cloneNode(true));
     }
 
     if (firstDayOfTheWeek <= 2) {
@@ -225,8 +234,8 @@
         return monthBody;
       }
     } else {
-      blankCellOffset = 2;
-      monthLabelCell.setAttribute('colspan', '2');
+      blankCellOffset = 3;
+      monthLabelCell.setAttribute('colspan', '3');
       row.appendChild(monthLabelCell);
     }