feat(datepicker): allow changing first day of the week. Fixes #4316.

Author: jelbourn

src/components/datepicker/calendar.js

@@ -502,10 +502,13 @@
    * This should only need to be called once during initialization.
    */
   CalendarCtrl.prototype.buildWeekHeader = function() {
+    var firstDayOfWeek = this.dateLocale.firstDayOfWeek;
+    var shortDays = this.dateLocale.shortDays;
+
     var row = document.createElement('tr');
     for (var i = 0; i < 7; i++) {
       var th = document.createElement('th');
-      th.textContent = this.dateLocale.shortDays[i];
+      th.textContent = shortDays[(i + firstDayOfWeek) % 7];
       row.appendChild(th);
     }
 

src/components/datepicker/calendar.spec.js

@@ -194,6 +194,19 @@ describe('md-calendar', function() {
         expect(extractRowText(header)).toEqual(['SZ', 'MZ', 'TZ', 'WZ', 'TZ', 'FZ','SZ']);
         dateLocale.shortDays = oldShortDays;
       });
+
+      it('should allow changing the first day of the week to Monday', function() {
+        var oldShortDays = dateLocale.shortDays;
+        dateLocale.shortDays = ['SZ', 'MZ', 'TZ', 'WZ', 'TZ', 'FZ', 'SZ'];
+        dateLocale.firstDayOfWeek = 1;
+
+        var newElement = createElement()[0];
+        var header = newElement.querySelector('.md-calendar-day-header tr');
+
+        expect(extractRowText(header)).toEqual(['MZ', 'TZ', 'WZ', 'TZ', 'FZ','SZ', 'SZ']);
+        dateLocale.shortDays = oldShortDays;
+        dateLocale.firstDayOfWeek = 0;
+      });
     });
 
     describe('#buildCalendarForMonth', function() {
@@ -226,6 +239,30 @@ describe('md-calendar', function() {
         expect(calendarDates).toEqual(expectedDates);
       });
 
+      it('should render a month correctly when the first day of the week is Monday', function() {
+        dateLocale.firstDayOfWeek = 1;
+        var date = new Date(2014, MAY, 30);
+        var monthElement = monthCtrl.buildCalendarForMonth(date);
+
+        var calendarRows = monthElement.querySelectorAll('tr');
+        var calendarDates = [];
+
+        angular.forEach(calendarRows, function(tr) {
+          calendarDates.push(extractRowText(tr));
+        });
+
+        var expectedDates = [
+          ['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'],
+          ['26', '27', '28', '29', '30', '31', ''],
+          ['', '', '', '', '', '', ''],
+        ];
+        expect(calendarDates).toEqual(expectedDates);
+        dateLocale.firstDayOfWeek = 0;
+      });
+
       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 = monthCtrl.buildCalendarForMonth(date);

src/components/datepicker/calendarMonth.js

@@ -172,7 +172,7 @@
     var date = this.dateUtil.isValidDate(opt_dateInMonth) ? opt_dateInMonth : new Date();
 
     var firstDayOfMonth = this.dateUtil.getFirstDateOfMonth(date);
-    var firstDayOfTheWeek = firstDayOfMonth.getDay();
+    var firstDayOfTheWeek = this.getLocaleDay_(firstDayOfMonth);
     var numberOfDaysInMonth = this.dateUtil.getNumberOfDaysInMonth(date);
 
     // Store rows for the month in a document fragment so that we can append them all at once.
@@ -263,4 +263,13 @@
     return monthBody;
   };
 
+  /**
+   * Gets the day-of-the-week index for a date for the current locale.
+   * @private
+   * @param {Date} date
+   * @returns {number} The column index of the date in the calendar.
+   */
+  CalendarMonthCtrl.prototype.getLocaleDay_ = function(date) {
+    return (date.getDay() + (7 - this.dateLocale.firstDayOfWeek)) % 7
+  };
 })();

src/components/datepicker/dateLocaleProvider.js

@@ -18,6 +18,8 @@
    * @property {(Array<string>)=} shortDays Array of abbreviated dayes of the week.
    * @property {(Array<string>)=} dates Array of dates of the month. Only necessary for locales
    *     using a numeral system other than [1, 2, 3...].
+   * @property {(Array<string>)=} firstDayOfWeek The first day of the week. Sunday = 0, Monday = 1,
+   *    etc.
    * @property {(function(string): Date)=} parseDate Function to parse a date object from a string.
    * @property {(function(Date): string)=} formatDate Function to format a date object to a string.
    * @property {(function(Date): string)=} monthHeaderFormatter Function that returns the label for
@@ -38,6 +40,9 @@
    *     $mdDateLocaleProvider.days = ['dimanche', 'lundi', 'mardi', ...];
    *     $mdDateLocaleProvider.shortDays = ['Di', 'Lu', 'Ma', ...];
    *
+   *     // Can change week display to start on Monday.
+   *     $mdDateLocaleProvider.firstDayOfWeek = 1;
+   *
    *     // Optional.
    *     $mdDateLocaleProvider.dates = [1, 2, 3, 4, 5, 6, ...];
    *
@@ -51,7 +56,7 @@
    *     };
    *
    *     $mdDateLocaleProvider.monthHeaderFormatter = function(date) {
-   *       myShortMonths[date.getMonth()] + ' ' + date.getFullYear();
+   *       return myShortMonths[date.getMonth()] + ' ' + date.getFullYear();
    *     };
    *
    *     // In addition to date display, date components also need localized messages
@@ -89,6 +94,9 @@
       /** Array of dates of a month (1 - 31). Characters might be different in some locales. */
       this.dates = null;
 
+      /** Index of the first day of the week. 0 = Sunday, 1 = Monday, etc. */
+      this.firstDayOfWeek = 0;
+
       /**
        * Function that converts the date portion of a Date to a string.
        * @type {(function(Date): string)}
@@ -231,6 +239,7 @@
         days: this.days || $locale.DATETIME_FORMATS.DAY,
         shortDays: this.shortDays || defaultShortDays,
         dates: this.dates || defaultDates,
+        firstDayOfWeek: this.firstDayOfWeek || 0,
         formatDate: this.formatDate || defaultFormatDate,
         parseDate: this.parseDate || defaultParseDate,
         isDateComplete: this.isDateComplete || defaultIsDateComplete,