Merge pull request #198 from davidsandoz/first-day-of-week

Add option to change first day of week

Author: 45kb

README.md

@@ -87,7 +87,8 @@ date-max-limit="" | String | false | Set a maximum date limit - you can use all
 date-set-hidden="" | String(Boolean) | false | Set the default date to be shown only in calendar and not in the input field
 date-disabled-dates="" | String([Date(), Date(), ...]) | false | Disable specific dates using an _Array_ of dates
 date-refocus="" | String(Boolean) | false | Set the datepicker to re-focus the input after selecting a date
-date-typer="" | String(Boolean) | false | Set the datepicker to update calendar date when user is typing a date, see validation [tips](#date-validation) 
+date-typer="" | String(Boolean) | false | Set the datepicker to update calendar date when user is typing a date, see validation [tips](#date-validation)
+date-week-start-day="" | String(Number) | 0 | Set the first day of the week. Must be an integer between 0 (Sunday) and 6 (Saturday). (e.g. 1 for Monday)
 datepicker-class="" | String('class1 class2 class3') | false | Set custom class/es for the datepicker calendar
 datepicker-append-to="" | String('#id','.classname', 'body') | false | Append the datepicker to #id or  .class element or to body
 datepicker-toggle="" | String(Boolean) | true | Set the datepicker to toggle its visibility on focus and blur

src/js/angular-datepicker.js

@@ -159,6 +159,7 @@
           , pageDatepickers
           , hours24h = 86400000
           , htmlTemplate = generateHtmlTemplate(prevButton, nextButton)
+          , n
           , onClickOnWindow = function onClickOnWindow() {
 
             if (!isMouseOn &&
@@ -292,23 +293,32 @@
               , nextMonthDays = []
               , howManyNextDays
               , howManyPreviousDays
-              , monthAlias;
+              , monthAlias
+              , dateWeekEndDay;
 
             $scope.days = [];
+            $scope.dateWeekStartDay = $scope.validateWeekDay($scope.dateWeekStartDay);
+            dateWeekEndDay = ($scope.dateWeekStartDay + 6) % 7;
 
             for (i = 1; i <= limitDate; i += 1) {
 
               $scope.days.push(i);
             }
 
-            //get previous month days is first day in month is not Sunday
-            if (firstDayMonthNumber === 0) {
+            //get previous month days if first day in month is not first day in week
+            if (firstDayMonthNumber === $scope.dateWeekStartDay) {
 
               //no need for it
               $scope.prevMonthDays = [];
             } else {
 
-              howManyPreviousDays = firstDayMonthNumber;
+              howManyPreviousDays = firstDayMonthNumber - $scope.dateWeekStartDay;
+
+              if (firstDayMonthNumber < $scope.dateWeekStartDay) {
+
+                howManyPreviousDays += 7;
+              }
+
               //get previous month
               if (Number(month) === 1) {
 
@@ -326,10 +336,17 @@
               $scope.prevMonthDays = prevMonthDays.slice(-howManyPreviousDays);
             }
 
-            //get next month days is first day in month is not Sunday
-            if (lastDayMonthNumber < 6) {
+            //get next month days if last day in month is not last day in week
+            if (lastDayMonthNumber === dateWeekEndDay) {
+              //no need for it
+              $scope.nextMonthDays = [];
+            } else {
+              howManyNextDays = 6 - lastDayMonthNumber + $scope.dateWeekStartDay;
+
+              if (lastDayMonthNumber < $scope.dateWeekStartDay) {
 
-              howManyNextDays = 6 - lastDayMonthNumber;
+                howManyNextDays -= 7;
+              }
               //get previous month
 
               //return next month days
@@ -339,9 +356,6 @@
               }
               //attach previous month days
               $scope.nextMonthDays = nextMonthDays;
-            } else {
-              //no need for it
-              $scope.nextMonthDays = [];
             }
           }
           , unregisterDataSetWatcher = $scope.$watch('dateSet', function dateSetWatcher(newValue) {
@@ -683,6 +697,16 @@
           return true;
         };
 
+        $scope.validateWeekDay = function isValidWeekDay(weekDay) {
+          var validWeekDay = Number(weekDay, 10);
+          // making sure that the given option is valid
+          if (!validWeekDay || validWeekDay < 0 || validWeekDay > 6) {
+
+            validWeekDay = 0;
+          }
+          return validWeekDay;
+        };
+
         // respect previously configured interpolation symbols.
         htmlTemplate = htmlTemplate.replace(/{{/g, $interpolate.startSymbol()).replace(/}}/g, $interpolate.endSymbol());
         $scope.dateMonthTitle = $scope.dateMonthTitle || 'Select month';
@@ -692,6 +716,7 @@
         $scope.month = $filter('date')(date, 'MMMM');//december-November like
         $scope.monthNumber = Number($filter('date')(date, 'MM')); // 01-12 like
         $scope.day = Number($filter('date')(date, 'dd')); //01-31 like
+        $scope.dateWeekStartDay = $scope.validateWeekDay($scope.dateWeekStartDay);
 
         if ($scope.dateMaxLimit) {
 
@@ -701,7 +726,13 @@
           $scope.year = Number($filter('date')(date, 'yyyy'));//2014 like
         }
         $scope.months = datetime.MONTH;
-        $scope.daysInString = ['0', '1', '2', '3', '4', '5', '6'].map(function mappingFunc(el) {
+
+        $scope.daysInString = [];
+        for (n = $scope.dateWeekStartDay; n <= $scope.dateWeekStartDay + 6; n += 1) {
+
+          $scope.daysInString.push(n % 7);
+        }
+        $scope.daysInString = $scope.daysInString.map(function mappingFunc(el) {
 
           return $filter('date')(new Date(new Date('06/08/2014').valueOf() + A_DAY_IN_MILLISECONDS * el), 'EEE');
         });
@@ -819,6 +850,7 @@
           'dateDisabledDates': '@',
           'dateSetHidden': '@',
           'dateTyper': '@',
+          'dateWeekStartDay': '@',
           'datepickerAppendTo': '@',
           'datepickerToggle': '@',
           'datepickerClass': '@',