feat(datepicker): dynamic date format for popup

Closes angular-ui#1071
bekos · Sep 27, 2013 · aa3eaa9 · aa3eaa9
1 parent 4738386
commit aa3eaa9
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 6 deletions.
diff --git 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
@@ -1,13 +1,18 @@
 <div ng-controller="DatepickerDemoCtrl">
     <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
 
-    <div class="well well-small pull-left" ng-model="dt">
+    <h4>Inline</h4>
+    <div class="well well-small" ng-model="dt" style="display:inline-block;">
         <datepicker min="minDate" show-weeks="showWeeks"></datepicker>
     </div>
 
+    <h4>Popup</h4>
     <div class="form-horizontal">
-        <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
-        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
+        <p>
+            <input type="text" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
+            <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
+        </p>
+        <p><i>Format options:</i> <select ng-model="format" ng-options="f for f in formats"><option></option></select></p>
     </div>
 
     <hr />

diff --git 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
@@ -1091,6 +1091,51 @@ describe('datepicker directive', function () {
       });
     });
 
+    describe('dynamic custom format', function () {
+      beforeEach(inject(function() {
+        $rootScope.format = 'dd-MMMM-yyyy';
+        var wrapElement = $compile('<div><input ng-model="date" datepicker-popup="{{format}}"><div>')($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('<div><input ng-model="date" datepicker-popup close-on-date-selection="close" is-open="true"><div>')($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() {