feat(datepicker): add documentation for datepicker

Author: jelbourn

src/components/calendar/calendar-theme.scss

@@ -0,0 +1,8 @@
+<div ng-controller="AppCtrl" style='padding: 40px;'>
+  <md-content>
+    <h1>{{title}}</h1>
+
+    <md-calendar ng-model="myDate"></md-calendar>
+
+  </md-content>
+</div>

src/components/calendar/datePicker-theme.scss

@@ -0,0 +1,42 @@
+/** Theme styles for mdCalendar. */
+
+.md-calendar.md-THEME_NAME-theme {
+  color: '{{foreground-2}}';
+
+  tr:last-child td {
+    border-bottom-color: '{{background-200}}';
+  }
+}
+.md-THEME_NAME-theme {
+
+  .md-calendar-day-header {
+    background: '{{background-200}}'; // grey-200
+    color: '{{foreground-2}}'; // grey-700
+  }
+
+  .md-calendar-date.md-calendar-date-today {
+    color: '{{primary-500}}'; // blue-500
+  }
+
+  // The CSS class `md-focus` is used instead of real browser focus for accessibility reasons
+  // (the root md-calendar holds browser focus).
+  .md-calendar-date.md-focus {
+    .md-calendar-date-selection-indicator {
+      background: '{{background-300}}'; // grey-300
+    }
+  }
+
+  .md-calendar-date-selection-indicator:hover {
+    background: '{{background-300}}'; // grey-300
+  }
+
+  // Selected style goes after hover and focus so that it takes priority.
+  .md-calendar-date.md-calendar-selected-date,
+  .md-calendar-date.md-focus.md-calendar-selected-date {
+    .md-calendar-date-selection-indicator {
+      background: '{{primary-500}}'; // blue-500
+      color: '{{primary-500-contrast}}'; // white
+    }
+  }
+
+}

src/components/calendar/demoCalendar/index.html

@@ -3,10 +3,10 @@
 
   /**
    * @ngdoc module
-   * @name material.components.calendar
-   * @description Calendar
+   * @name material.components.datepicker
+   * @description Datepicker
    */
-  angular.module('material.components.calendar', [
+  angular.module('material.components.datepicker', [
     'material.core',
     'material.components.virtualRepeat',
     'material.components.icon'
@@ -17,6 +17,9 @@
   // TODO(mchen): Date "isComplete" logic
 
   // POST RELEASE
+  // TODO(jelbourn): Clicking on the month label opens the month-picker.
+  // TODO(jelbourn): Minimum and maximum date
+  // TODO(jelbourn): Define virtual scrolling constants (compactness).
   // 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)
@@ -26,11 +29,6 @@
   //     announcement and key handling).
   // Read-only calendar (not just date-picker).
 
-  // COULD GO EITHER WAY
-  // TODO(jelbourn): Clicking on the month label opens the month-picker.
-  // TODO(jelbourn): Minimum and maximum date
-  // TODO(jelbourn): Define virtual scrolling constants (compactness).
-
   /**
    * Height of one calendar month tbody. This must be made known to the virtual-repeat and is
    * subsequently used for scrolling to specific months.
@@ -78,8 +76,8 @@
    * @ngInject @constructor
    */
   function CalendarCtrl($element, $attrs, $scope, $animate, $q, $mdConstant,
-      $$mdDateUtil, $$mdDateLocale, $mdInkRipple, $mdUtil) {
-
+      $mdTheming, $$mdDateUtil, $$mdDateLocale, $mdInkRipple, $mdUtil) {
+    $mdTheming($element);
     /**
      * Dummy array-like object for virtual-repeat to iterate over. The length is the total
      * number of months that can be viewed. This is shorter than ideal because of (potential)