fix(datepicker): fix broken weekStart handling, rename option to startWeek (fixes mgcrea#449)

Author: mgcrea

src/datepicker/datepicker.js

@@ -23,7 +23,7 @@ angular.module('mgcrea.ngStrap.datepicker', ['mgcrea.ngStrap.helpers.dateParser'
       maxDate: +Infinity,
       startView: 0,
       minView: 0,
-      weekStart: 0
+      startWeek: 0
     };
 
     this.$get = function($window, $document, $rootScope, $sce, $locale, dateFilter, datepickerViews, $tooltip) {
@@ -233,7 +233,7 @@ angular.module('mgcrea.ngStrap.datepicker', ['mgcrea.ngStrap.helpers.dateParser'
 
         // Directive options
         var options = {scope: scope, controller: controller};
-        angular.forEach(['placement', 'container', 'delay', 'trigger', 'keyboard', 'html', 'animation', 'template', 'autoclose', 'dateType', 'dateFormat', 'useNative', 'lang', 'startView', 'minView'], function(key) {
+        angular.forEach(['placement', 'container', 'delay', 'trigger', 'keyboard', 'html', 'animation', 'template', 'autoclose', 'dateType', 'dateFormat', 'startWeek', 'useNative', 'lang', 'startView', 'minView'], function(key) {
           if(angular.isDefined(attr[key])) options[key] = attr[key];
         });
 
@@ -351,8 +351,8 @@ angular.module('mgcrea.ngStrap.datepicker', ['mgcrea.ngStrap.helpers.dateParser'
         var options = picker.$options;
 
         var weekDaysMin = $locale.DATETIME_FORMATS.SHORTDAY;
-        var weekDaysLabels = weekDaysMin.slice(options.weekStart).concat(weekDaysMin.slice(0, options.weekStart));
-        var dayLabelHtml = $sce.trustAsHtml('<th class="dow text-center">' + weekDaysLabels.join('</th><th class="dow text-center">') + '</th>');
+        var weekDaysLabels = weekDaysMin.slice(options.startWeek).concat(weekDaysMin.slice(0, options.startWeek));
+        var weekDaysLabelsHtml = $sce.trustAsHtml('<th class="dow text-center">' + weekDaysLabels.join('</th><th class="dow text-center">') + '</th>');
 
         var startDate = picker.$date || new Date();
         var viewDate = {year: startDate.getFullYear(), month: startDate.getMonth(), date: startDate.getDate()};
@@ -373,14 +373,14 @@ angular.module('mgcrea.ngStrap.datepicker', ['mgcrea.ngStrap.helpers.dateParser'
             },
             build: function() {
               var firstDayOfMonth = new Date(viewDate.year, viewDate.month, 1);
-              var firstDate = new Date(+firstDayOfMonth - (firstDayOfMonth.getDay() - options.weekStart) * 864e5);
+              var firstDate = new Date(+firstDayOfMonth - (firstDayOfMonth.getDay() + options.startWeek) * 864e5);
               var days = [], day;
               for(var i = 0; i < 42; i++) { // < 7 * 6
                 day = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate() + i);
                 days.push({date: day, label: dateFilter(day, this.format), selected: picker.$date && this.isSelected(day), muted: day.getMonth() !== viewDate.month, disabled: this.isDisabled(day)});
               }
               scope.title = dateFilter(firstDayOfMonth, 'MMMM yyyy');
-              scope.labels = dayLabelHtml;
+              scope.labels = weekDaysLabelsHtml;
               scope.rows = split(days, this.split);
               this.built = true;
             },

src/datepicker/docs/datepicker.demo.html

@@ -195,7 +195,7 @@ <h4>This module supports exotic placement options!</h4>
           </td>
         </tr>
         <tr>
-          <td>weekStart</td>
+          <td>startWeek</td>
           <td>number</td>
           <td>1</td>
           <td>
@@ -215,7 +215,7 @@ <h4>Default options</h4>
           .config(function($datepickerProvider) {
             angular.extend($datepickerProvider.defaults, {
               dateFormat: 'dd/MM/yyyy',
-              weekStart: 1
+              startWeek: 1
             });
           })
         </code>

src/datepicker/test/datepicker.spec.js

@@ -59,7 +59,7 @@ describe('datepicker', function() {
       element: '<input type="text" ng-model="selectedDate" data-date-format="yyyy-MM-dd" bs-datepicker>'
     },
     'options-minDate': {
-      scope: {selectedDate: new Date('02/22/86'), minDate: '02/20/86'},
+      scope: {selectedDate: new Date(1986, 1, 22), minDate: '02/20/86'},
       element: '<input type="text" ng-model="selectedDate" data-min-date="{{minDate}}" bs-datepicker>'
     },
     'options-minDate-today': {
@@ -71,9 +71,13 @@ describe('datepicker', function() {
       element: '<input type="text" ng-model="selectedDate" data-max-date="today" bs-datepicker>'
     },
     'options-maxDate': {
-      scope: {selectedDate: new Date('02/22/86'), maxDate: '02/24/86'},
+      scope: {selectedDate: new Date(1986, 1, 22), maxDate: '02/24/86'},
       element: '<input type="text" ng-model="selectedDate" data-max-date="{{maxDate}}" bs-datepicker>'
     },
+    'options-startWeek': {
+      scope: {selectedDate: new Date(2015, 1, 22), startWeek: 1},
+      element: '<input type="text" ng-model="selectedDate" data-start-week="{{startWeek}}" bs-datepicker>'
+    },
     'options-autoclose': {
       element: '<input type="text" ng-model="selectedDate" data-autoclose="1" bs-datepicker>'
     },
@@ -118,7 +122,7 @@ describe('datepicker', function() {
       expect(sandboxEl.find('.dropdown-menu thead button:eq(1)').text()).toBe(dateFilter(today, 'MMMM yyyy'));
       var todayDate = today.getDate();
       var firstDate = sandboxEl.find('.dropdown-menu tbody .btn:eq(0)').text() * 1;
-      expect(new Date(today.getFullYear(), today.getMonth() - (firstDate !== 1 ? 1 : 0), firstDate).getDay()).toBe($datepicker.defaults.weekStart);
+      expect(new Date(today.getFullYear(), today.getMonth() - (firstDate !== 1 ? 1 : 0), firstDate).getDay()).toBe($datepicker.defaults.startWeek);
     });
 
     it('should correctly display active date', function() {
@@ -418,6 +422,17 @@ describe('datepicker', function() {
 
     });
 
+    describe('startWeek', function() {
+
+      it('should support a dynamic startWeek', function() {
+        var elm = compileDirective('options-startWeek');
+        angular.element(elm[0]).triggerHandler('focus');
+        expect(sandboxEl.find('.dropdown-menu thead tr:eq(1) th:eq(0)').text()).toBe('Mon');
+        expect(sandboxEl.find('.dropdown-menu tbody button:eq(0)').text()).toBe('31');
+      });
+
+    });
+
     describe('useNative', function() {
 
       it('should correctly compile template according to useNative', function() {