feat(datepicker): allow for custom templates for day / month / year

Custom templates can be specified with template-url attribute

Author: filso

Diff for: src/datepicker/datepicker.js

@@ -247,7 +247,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   return {
     restrict: 'EA',
     replace: true,
-    templateUrl: attrs.templateUrl || 'template/datepicker/day.html',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/datepicker/day.html';
+    },
     require: '^datepicker',
     link: function(scope, element, attrs, ctrl) {
       scope.showWeeks = ctrl.showWeeks;
@@ -359,7 +361,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   return {
     restrict: 'EA',
     replace: true,
-    templateUrl: attrs.templateUrl || 'template/datepicker/month.html',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/datepicker/month.html';
+    },
     require: '^datepicker',
     link: function(scope, element, attrs, ctrl) {
       ctrl.step = { years: 1 };
@@ -417,7 +421,9 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   return {
     restrict: 'EA',
     replace: true,
-    templateUrl: attrs.templateUrl || 'template/datepicker/year.html',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/datepicker/year.html';
+    },
     require: '^datepicker',
     link: function(scope, element, attrs, ctrl) {
       var range = ctrl.yearRange;

Diff for: 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>' +
+          '<daypicker template-url="foo/day.html"></daypicker>' +
+          '<monthpicker template-url="foo/month.html"></monthpicker>' +
+          '<yearpicker template-url="foo/year.html"></yearpicker>' +
+        '</div>');
+
+        element = $compile('<datepicker ng-model="date" template-url="foo/bar.html"></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>');