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

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,