feat(datepicker): add templateUrl support for pickers

- Add support for custom template urls for `uibDaypicker`, `uibMonthpicker`, and `uibYearpicker` Closes #4432
angular-ui · Oct 14, 2015 · 1f65d87 · 1f65d87
1 parent 16dafd5
commit 1f65d87
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
@@ -458,7 +458,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
 .directive('uibDaypicker', function() {
   return {
     replace: true,
-    templateUrl: 'template/datepicker/day.html',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/datepicker/day.html';
+    },
     require: ['^?uibDatepicker', 'uibDaypicker', '^?datepicker'],
     controller: 'UibDaypickerController',
     link: function(scope, element, attrs, ctrls) {
@@ -473,7 +475,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
 .directive('uibMonthpicker', function() {
   return {
     replace: true,
-    templateUrl: 'template/datepicker/month.html',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/datepicker/month.html';
+    },
     require: ['^?uibDatepicker', 'uibMonthpicker', '^?datepicker'],
     controller: 'UibMonthpickerController',
     link: function(scope, element, attrs, ctrls) {
@@ -488,7 +492,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
 .directive('uibYearpicker', function() {
   return {
     replace: true,
-    templateUrl: 'template/datepicker/year.html',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/datepicker/year.html';
+    },
     require: ['^?uibDatepicker', 'uibYearpicker', '^?datepicker'],
     controller: 'UibYearpickerController',
     link: function(scope, element, attrs, ctrls) {
@@ -1034,7 +1040,7 @@ angular.module('ui.bootstrap.datepicker')
   var focusElement = function() {
     self.element[0].focus();
   };
-  
+
   $scope.$on('uib:datepicker.focus', focusElement);
 
   $scope.keydown = function(evt) {

diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
@@ -362,6 +362,25 @@ describe('datepicker directive', function() {
         expect(element.html()).toBe('baz');
       });
 
+      it('should support custom day, month and year templates', function() {
+        $templateCache.put('foo/day.html', '<div>day</div>');
+        $templateCache.put('foo/month.html', '<div>month</div>');
+        $templateCache.put('foo/year.html', '<div>year</div>');
+
+        $templateCache.put('foo/bar.html', '<div>' +
+          '<uib-daypicker template-url="foo/day.html"></uib-daypicker>' +
+          '<uib-monthpicker template-url="foo/month.html"></uib-monthpicker>' +
+          '<uib-yearpicker template-url="foo/year.html"></uib-yearpicker>' +
+        '</div>');
+
+        element = $compile('<uib-datepicker ng-model="date" template-url="foo/bar.html"></uib-datepicker>')($rootScope);
+        $rootScope.$digest();
+
+        var expectedHtml = '<div template-url="foo/day.html">day</div><div template-url="foo/month.html">month</div><div template-url="foo/year.html">year</div>';
+
+        expect(element.html()).toBe(expectedHtml);
+      });
+
       it('should expose the controller in the template', function() {
         $templateCache.put('template/datepicker/datepicker.html', '<div>{{datepicker.text}}</div>');