feat(calendar): starting work for date-picker.

Author: jelbourn

src/components/calendar/calendar.spec.js

@@ -1,12 +1,6 @@
 
-describe('md-calendar', function() {
-  // When constructing a Date, the month is zero-based. This can be confusing, since people are
-  // used to seeing them one-based. So we create these aliases to make reading the tests easier.
-  var JAN = 0, FEB = 1, MAR = 2, APR = 3, MAY = 4, JUN = 5, JUL = 6, AUG = 7, SEP = 8, OCT = 9,
-      NOV = 10, DEC = 11;
-
-  var ngElement, element, scope, pageScope, controller, $animate, $compile;
-  var $rootScope, dateLocale;
+describe('md-checkbox', function() {
+  var ngElement, element, scope, pageScope, controller, $animate;
 
   /**
    * To apply a change in the date, a scope $apply() AND a manual triggering of animation
@@ -17,158 +11,40 @@ describe('md-calendar', function() {
     $animate.triggerCallbacks();
   }
 
-  /**
-   * Extracts text as an array (one element per cell) from a tr element.
-   */
-  function extractRowText(tr) {
-    var cellContents = [];
-    angular.forEach(tr.children, function(tableElement) {
-      cellContents.push(tableElement.textContent);
-    });
-
-    return cellContents;
-  }
-
-  /**
-   * Finds a date td given a day of the month from an .md-calendar-month element.
-   */
-  function findDateElement(monthElement, day) {
-    var tds = monthElement.querySelectorAll('td');
-    var td;
-
-    for (var i = 0; i < tds.length; i++) {
-      td = tds[i];
-      if (td.textContent === day.toString()) {
-        return td;
-      }
-    }
-  }
-
-
-  /**
-   * Creates and compiles an md-calendar element.
-   */
-  function createElement(parentScope) {
-    var directiveScope = parentScope || $rootScope.$new();
-    var template = '<md-calendar ng-model="myDate"></md-calendar>';
-    var newElement = $compile(template)(directiveScope);
-    directiveScope.$apply();
-    return newElement;
-  }
-
   beforeEach(module('material.components.calendar', 'ngAnimateMock'));
 
-  beforeEach(inject(function($injector) {
-    $animate = $injector.get('$animate');
-    $compile = $injector.get('$compile');
-    $rootScope = $injector.get('$rootScope');
-    dateLocale = $injector.get('$$mdDateLocale');
+  beforeEach(inject(function($compile, $rootScope, _$animate_) {
+    $animate = _$animate_;
 
+    var template = '<md-calendar ng-model="myDate"></md-calendar>';
     pageScope = $rootScope.$new();
     pageScope.myDate = null;
 
-    ngElement = createElement(pageScope);
+    ngElement = $compile(template)(pageScope);
     element = ngElement[0];
     scope = ngElement.scope();
     controller = ngElement.controller('mdCalendar');
+
+    pageScope.$apply();
   }));
 
   describe('ngModel binding', function() {
 
     it('should update the calendar based on ngModel change', function() {
-      pageScope.myDate = new Date(2014, MAY, 30);
+      pageScope.myDate = new Date(2014, 4, 30);
       applyDateChange();
 
       var displayedMonth = element.querySelector('.md-calendar-month-label');
       var selectedDate = element.querySelector('.md-calendar-selected-date');
 
       expect(displayedMonth.textContent).toBe('May');
-      expect(selectedDate.textContent).toBe('30');
+      expect(selectedDate.textContent).toBe('30')
     });
 
   });
 
   describe('calendar construction', function() {
-    describe('weeks header', function() {
-      it('should display the weeks header in the first row', function() {
-        var header = element.querySelector('.md-calendar-day-header tr');
 
-        expect(extractRowText(header)).toEqual(['S', 'M', 'T', 'W', 'T', 'F' ,'S']);
-      });
-
-      it('should use $$mdDateLocale.shortDays as weeks header values', function() {
-        var oldShortDays = dateLocale.shortDays;
-        dateLocale.shortDays = ['SZ', 'MZ', 'TZ', 'WZ', 'TZ', 'FZ', 'SZ'];
-
-        var newElement = createElement()[0];
-        var header = newElement.querySelector('.md-calendar-day-header tr');
-
-        expect(extractRowText(header)).toEqual(['SZ', 'MZ', 'TZ', 'WZ', 'TZ', 'FZ','SZ']);
-        dateLocale.shortDays = oldShortDays;
-      });
-    });
-
-    describe('#buildCalendarForMonth', function() {
-      it('should render a month correctly as a table', function() {
-        var date = new Date(2014, MAY, 30);
-        var monthElement = controller.buildCalendarForMonth(date);
-
-        var calendarRows = monthElement.querySelectorAll('tr');
-        var calendarDates = [];
-
-        angular.forEach(calendarRows, function(tr) {
-          calendarDates.push(extractRowText(tr));
-        });
-
-        var expectedDates = [
-          ['May', '', '', '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', '26', '27', '28', '29', '30', '31'],
-        ];
-        expect(calendarDates).toEqual(expectedDates);
-      });
-
-      it('should show the month on its own row if the first day is before Tuesday', function() {
-        var date = new Date(2014, JUN, 30); // 1st on Sunday
-        var monthElement = controller.buildCalendarForMonth(date);
-
-        var firstRow = monthElement.querySelector('tr');
-        expect(extractRowText(firstRow)).toEqual(['Jun']);
-      });
-    });
-
-
-    it('should highlight today', function() {
-      pageScope.myDate = controller.today;
-      applyDateChange();
-
-      var monthElement = element.querySelector('.md-calendar-month');
-      var day = controller.today.getDate();
-
-      var dateElement = findDateElement(monthElement, day);
-      expect(dateElement.classList.contains('md-calendar-date-today')).toBe(true);
-    });
-
-    it('should have ids for date elements unique to the directive instance', function() {
-      pageScope.myDate = controller.today;
-      applyDateChange();
-
-      var otherScope = $rootScope.$new();
-
-      otherScope.myDate = controller.today;
-      var otherNgElement = createElement(otherScope);
-
-      var monthElement = element.querySelector('.md-calendar-month');
-      var day = controller.today.getDate();
-      var dateElement = findDateElement(monthElement, day);
-
-      var otherMonthElement = otherNgElement[0].querySelector('.md-calendar-month');
-      var otherDateElement = findDateElement(otherMonthElement, day);
-
-      expect(dateElement.id).not.toEqual(otherDateElement.id);
-    });
   });
 
   describe('keyboard events', function() {

src/components/calendar/dateLocaleProvider.js

@@ -44,7 +44,7 @@
      * @param $locale
      * @returns {DateLocale}
      */
-    DateLocaleProvider.prototype.$get = function($locale) {
+    DateLocaleProvider.prototype.$get = function($locale, $filter) {
       /**
        * Default date-to-string formatting function.
        * @param {Date} date
@@ -63,29 +63,21 @@
         return new Date(dateString);
       }
 
-      // The default "short" day strings are the first character of each day,
-      // e.g., "Monday" => "M".
+      // The default "short" day strings are the first character of each day.
       var defaultShortDays = $locale.DATETIME_FORMATS.DAY.map(function(day) {
         return day[0];
       });
 
-      // The default dates are simply the numbers 1 through 31.
-      var defaultDates = Array(32);
-      for (var i = 1; i <= 31; i++) {
-        defaultDates[i] = i;
-      }
-
       window.$locale = $locale;
+      window.$filter = $filter;
 
-      // TODO(jelbourn): Freeze this object.
-      return {
+      var dateLocale = {
         months: this.months || $locale.DATETIME_FORMATS.MONTH,
         shortMonths: this.shortMonths || $locale.DATETIME_FORMATS.SHORTMONTH,
         days: this.days || $locale.DATETIME_FORMATS.DAY,
         shortDays: this.shortDays || defaultShortDays,
-        dates: this.dates || defaultDates,
-        formatDate: this.formatDate || defaultFormatDate,
-        parseDate: this.parseDate || defaultParseDate
+        formatDate: defaultFormatDate,
+        parseDate: defaultParseDate
       };
     };
 

src/components/calendar/dateUtil.js

@@ -19,8 +19,7 @@
       incrementDays: incrementDays,
       incrementMonths: incrementMonths,
       getLastDateOfMonth: getLastDateOfMonth,
-      isSameDay: isSameDay,
-      isValidDate: isValidDate
+      isSameDay: isSameDay
     };
 
     /**
@@ -163,14 +162,5 @@
     function getLastDateOfMonth(date) {
       return new Date(date.getFullYear(), date.getMonth(), getNumberOfDaysInMonth(date));
     }
-
-    /**
-     * Checks whether a date is valid.
-     * @param {Date} date
-     * @return {boolean} Whether the date is a valid Date.
-     */
-    function isValidDate(date) {
-      return date != null && date.getTime && !isNaN(date.getTime());
-    }
   });
 })();