feat(datepicker): add documentation for datepicker

src/components/datepicker/_demoCalendar/index.html

@@ -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/datepicker/calendar-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/calendar.js → src/components/datepicker/calendar.js

@@ -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)

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

@@ -91,7 +91,7 @@ describe('md-calendar', function() {
     return element.querySelector('.md-focus');
   }
 
-  beforeEach(module('material.components.calendar', 'ngAnimateMock'));
+  beforeEach(module('material.components.datepicker', 'ngAnimateMock'));
 
   beforeEach(inject(function($injector) {
     $animate = $injector.get('$animate');

src/components/calendar/calendarMonth.js → src/components/datepicker/calendarMonth.js

@@ -2,7 +2,7 @@
   'use strict';
 
 
-  angular.module('material.components.calendar')
+  angular.module('material.components.datepicker')
       .directive('mdCalendarMonth', mdCalendarMonthDirective);
 
 

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

@@ -12,7 +12,7 @@ describe('$$mdDateLocale', function() {
     }
   };
 
-  beforeEach(module('material.components.calendar'));
+  beforeEach(module('material.components.datepicker'));
 
   describe('with default values', function() {
     beforeEach(module(function($provide) {

src/components/calendar/dateLocaleProvider.js → src/components/datepicker/dateLocaleProvider.js

@@ -5,7 +5,7 @@
    * Provider that allows the user to specify messages, formatters, and parsers for date
    * internationalization.
    */
-  angular.module('material.components.calendar').config(function($provide) {
+  angular.module('material.components.datepicker').config(function($provide) {
     // TODO(jelbourn): Assert provided values are correctly formatted. Need assertions.
 
     /** @constructor */

src/components/datepicker/datePicker-theme.scss

@@ -0,0 +1,33 @@
+/** Theme styles for mdDatepicker. */
+
+md-datepicker.md-THEME_NAME-theme {
+  background: white;
+}
+
+.md-THEME_NAME-theme {
+
+  .md-datepicker-input-container {
+    border-bottom-color: '{{background-300}}';
+  }
+
+  .md-datepicker-calendar-pane {
+    border-color: '{{background-300}}';
+  }
+
+  .md-datepicker-triangle-button {
+    &:hover .md-datepicker-expand-triangle {
+      border-top-color: '{{foreground-2}}';
+    }
+  }
+
+  // Open state for all of the elements of the picker.
+  .md-datepicker-open {
+    .md-datepicker-calendar-icon {
+      fill: '{{primary-500}}';
+    }
+  }
+
+  .md-datepicker-calendar {
+    background: white;
+  }
+}

src/components/calendar/datePicker.js → src/components/datepicker/datePicker.js

@@ -7,6 +7,7 @@
   // TODO(jelbourn): make sure this plays well with validation and ngMessages.
 
   // POST RELEASE
+  // TODO(jelbourn): calendar pane doesn't open up outside of visible viewport.
   // TODO(jelbourn): forward more attributes to the internal input (required, autofocus, etc.)
   // TODO(jelbourn): error state
   // TODO(jelbourn): something better for mobile (calendar panel takes up entire screen?)
@@ -15,9 +16,26 @@
   // TODO(jelbourn): RTL
 
 
-  angular.module('material.components.calendar')
+  angular.module('material.components.datepicker')
       .directive('mdDatepicker', datePickerDirective);
 
+  /**
+   * @ngdoc directive
+   * @name mdDatepicker
+   * @module material.components.datepicker
+   *
+   * @param {Date} ng-model The component's model. Uses a JavaScript Date object.
+   * @param {boolean=} disabled Whether the datepicker is disabled.
+   *
+   * @description
+   * `<md-datepicker>` is a component used to select a single date.
+   *
+   * @usage
+   * <hljs lang="html">
+   *   <md-date-picker ng-model="birthday"></md-date-picker>
+   * </hljs>
+   *
+   */
   function datePickerDirective() {
     return {
       template:
@@ -71,8 +89,8 @@
    *
    * @ngInject @constructor
    */
-  function DatePickerCtrl($scope, $element, $attrs, $compile, $timeout, $mdConstant, $mdUtil,
-      $$mdDateLocale, $$mdDateUtil, $$rAF) {
+  function DatePickerCtrl($scope, $element, $attrs, $compile, $timeout, $mdConstant, $mdTheming,
+      $mdUtil, $$mdDateLocale, $$mdDateUtil, $$rAF) {
     /** @final */
     this.$compile = $compile;
 
@@ -134,6 +152,8 @@
 
     this.calendarPane.id = 'md-date-pane' + $mdUtil.nextUid();
 
+    $mdTheming($element);
+
     /** Pre-bound click handler is saved so that the event listener can be removed. */
     this.bodyClickHandler = angular.bind(this, this.handleBodyClick);
 

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

@@ -10,7 +10,7 @@ describe('md-date-picker', function() {
   var ngElement, element, scope, pageScope, controller;
   var $timeout, $$rAF, $animate, keyCodes, dateUtil, dateLocale;
 
-  beforeEach(module('material.components.calendar', 'ngAnimateMock'));
+  beforeEach(module('material.components.datepicker', 'ngAnimateMock'));
 
   beforeEach(inject(function($compile, $rootScope, $injector) {
     $$rAF = $injector.get('$$rAF');

src/components/calendar/dateUtil.js → src/components/datepicker/dateUtil.js

@@ -5,7 +5,7 @@
    * Utility for performing date calculations to facilitate operation of the calendar and
    * datepicker.
    */
-  angular.module('material.components.calendar').factory('$$mdDateUtil', function() {
+  angular.module('material.components.datepicker').factory('$$mdDateUtil', function() {
     return {
       getFirstDateOfMonth: getFirstDateOfMonth,
       getNumberOfDaysInMonth: getNumberOfDaysInMonth,

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

@@ -7,7 +7,7 @@ describe('$$mdDateUtil', function() {
 
   var dateUtil;
 
-  beforeEach(module('material.components.calendar'));
+  beforeEach(module('material.components.datepicker'));
 
   beforeEach(inject(function($$mdDateUtil) {
     dateUtil = $$mdDateUtil;