diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js index 91237005c3..0d9d078294 100644 --- a/src/datepicker/datepicker.js +++ b/src/datepicker/datepicker.js @@ -266,9 +266,12 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon restrict: 'EA', require: 'ngModel', link: function(originalScope, element, attrs, ngModel) { - - var closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection; - var dateFormat = attrs.datepickerPopup || datepickerPopupConfig.dateFormat; + var closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? originalScope.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection; + var dateFormat; + attrs.$observe('datepickerPopup', function(value) { + dateFormat = value || datepickerPopupConfig.dateFormat; + ngModel.$render(); + }); // create a child scope for the datepicker directive so we are not polluting original scope var scope = originalScope.$new(); diff --git a/src/datepicker/docs/demo.html b/src/datepicker/docs/demo.html index 22404d030e..37c891759a 100644 --- a/src/datepicker/docs/demo.html +++ b/src/datepicker/docs/demo.html @@ -1,13 +1,18 @@
Selected date is: {{dt | date:'fullDate' }}
-
+

Inline

+
+

Popup

- - +

+ + +

+

Format options:


diff --git a/src/datepicker/docs/demo.js b/src/datepicker/docs/demo.js index 18eb51ec83..6b2e445bf5 100644 --- a/src/datepicker/docs/demo.js +++ b/src/datepicker/docs/demo.js @@ -33,4 +33,7 @@ var DatepickerDemoCtrl = function ($scope, $timeout) { 'year-format': "'yy'", 'starting-day': 1 }; + + $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate']; + $scope.format = $scope.formats[0]; }; diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js index 951b9ae9fe..baf3415e0f 100644 --- a/src/datepicker/test/datepicker.spec.js +++ b/src/datepicker/test/datepicker.spec.js @@ -1091,6 +1091,51 @@ describe('datepicker directive', function () { }); }); + describe('dynamic custom format', function () { + beforeEach(inject(function() { + $rootScope.format = 'dd-MMMM-yyyy'; + var wrapElement = $compile('
')($rootScope); + $rootScope.$digest(); + assignElements(wrapElement); + })); + + it('to display the correct value in input', function() { + expect(inputEl.val()).toBe('30-September-2010'); + }); + + it('updates the input when a day is clicked', function() { + clickOption(2, 3); + expect(inputEl.val()).toBe('15-September-2010'); + expect($rootScope.date).toEqual(new Date('September 15, 2010 15:30:00')); + }); + + it('updates the input correctly when model changes', function() { + $rootScope.date = new Date("August 11, 2013 09:09:00"); + $rootScope.$digest(); + expect(inputEl.val()).toBe('11-August-2013'); + }); + + it('updates the input correctly when format changes', function() { + $rootScope.format = 'dd/MM/yyyy'; + $rootScope.$digest(); + expect(inputEl.val()).toBe('30/09/2010'); + }); + }); + + describe('`close-on-date-selection` attribute', function () { + beforeEach(inject(function() { + $rootScope.close = false; + var wrapElement = $compile('
')($rootScope); + $rootScope.$digest(); + assignElements(wrapElement); + })); + + it('dpes not close the dropdown when a day is clicked', function() { + clickOption(2, 3); + expect(dropdownEl.css('display')).not.toBe('none'); + }); + }); + describe('button bar', function() { var buttons; beforeEach(inject(function() {