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;