feat(datepicker): pass through attrs in popup

- Passes through all datepicker config attributes from the popup to the datepicker Closes #4863 Fixes #3338
angular-ui · Nov 10, 2015 · 26d3103 · 26d3103
1 parent 0917623
commit 26d3103
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 10 deletions.
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
@@ -27,13 +27,14 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   // Modes chain
   this.modes = ['day', 'month', 'year'];
 
-  // Configuration attributes
-  angular.forEach(['formatDay', 'formatMonth', 'formatYear', 'formatDayHeader', 'formatDayTitle', 'formatMonthTitle',
-                   'showWeeks', 'startingDay', 'yearRange', 'shortcutPropagation'], function(key, index) {
-    self[key] = angular.isDefined($attrs[key]) ?
-      index < 6 ? $interpolate($attrs[key])($scope.$parent) :
-        $scope.$parent.$eval($attrs[key]) :
-      datepickerConfig[key];
+  // Interpolated configuration attributes
+  angular.forEach(['formatDay', 'formatMonth', 'formatYear', 'formatDayHeader', 'formatDayTitle', 'formatMonthTitle'], function(key) {
+    self[key] = angular.isDefined($attrs[key]) ? $interpolate($attrs[key])($scope.$parent) : datepickerConfig[key];
+  });
+
+  // Evaled configuration attributes
+  angular.forEach(['showWeeks', 'startingDay', 'yearRange', 'shortcutPropagation'], function(key) {
+    self[key] = angular.isDefined($attrs[key]) ? $scope.$parent.$eval($attrs[key]) : datepickerConfig[key];
   });
 
   // Watchable date attributes
@@ -650,9 +651,11 @@ function(scope, element, attrs, $compile, $parse, $document, $rootScope, $positi
       datepickerEl.attr('date-disabled', 'dateDisabled({ date: date, mode: mode })');
     }
 
-    if (attrs.showWeeks) {
-      datepickerEl.attr('show-weeks', attrs.showWeeks);
-    }
+    angular.forEach(['formatDay', 'formatMonth', 'formatYear', 'formatDayHeader', 'formatDayTitle', 'formatMonthTitle', 'showWeeks', 'startingDay', 'yearRange'], function(key) {
+      if (angular.isDefined(attrs[key])) {
+        datepickerEl.attr(cameltoDash(key), attrs[key]);
+      }
+    });
 
     if (attrs.customClass) {
       datepickerEl.attr('custom-class', 'customClass({ date: date, mode: mode })');

diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
@@ -2304,6 +2304,69 @@ describe('datepicker directive', function() {
           expect(focused).toBe(true);
         });
       });
+
+      describe('pass through attributes', function() {
+        var wrapElement;
+        describe('formatting', function() {
+          beforeEach(function() {
+            $rootScope.dayTitle = 'MMMM, yy';
+            wrapElement = $compile('<div><input uib-datepicker-popup ng-model="date"' +
+              'is-open="true"' +
+              'format-day="d"' +
+              'format-day-header="EEEE"' +
+              'format-day-title="{{dayTitle}}"' +
+              'format-month="MMM"' +
+              'format-month-title="yy"' +
+              'format-year="yy"' +
+              'year-range="10"></input></div>')($rootScope);
+            $rootScope.$digest();
+            assignElements(wrapElement);
+          });
+
+          it('changes the title format in `day` mode', function() {
+            expect(getTitle()).toBe('September, 10');
+          });
+
+          it('changes the title & months format in `month` mode', function() {
+            clickTitleButton();
+            assignElements(wrapElement);
+            expect(getTitle()).toBe('10');
+            expect(getOptions()).toEqual([
+              ['Jan', 'Feb', 'Mar'],
+              ['Apr', 'May', 'Jun'],
+              ['Jul', 'Aug', 'Sep'],
+              ['Oct', 'Nov', 'Dec']
+            ]);
+          });
+
+          it('changes the title, year format & range in `year` mode', function() {
+            clickTitleButton();
+            assignElements(wrapElement);
+            clickTitleButton();
+            assignElements(wrapElement);
+            expect(getTitle()).toBe('01 - 10');
+            expect(getOptions()).toEqual([
+              ['01', '02', '03', '04', '05'],
+              ['06', '07', '08', '09', '10']
+            ]);
+          });
+
+          it('shows day labels', function() {
+            expect(getLabels(true)).toEqual(['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']);
+          });
+
+          it('changes the day format', function() {
+            expect(getOptions(true)).toEqual([
+              ['29', '30', '31', '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', '1', '2'],
+              ['3', '4', '5', '6', '7', '8', '9']
+            ]);
+          });
+        });
+      });
     });
 
     describe('with empty initial state', function() {