feat(date): Watch for model date value changes and not just model cha…

…nges closes angular-ui#82
alexanderchan · Dec 3, 2015 · 496bdd6 · 496bdd6
1 parent b357626
commit 496bdd6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -9,23 +9,36 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>AngularUI - Date Picker Demo</title>
     <base href=".."></base>
-    
+
     <!-- Styles -->
     <link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
   </head>
 
-  <body ng-app="ui.date">
+  <body ng-app="Demo">
+    <div ng-controller="DemoCtrl">
     <!-- Date -->
     <label for="date">Select Date:</label>
     <input type="text" id="date" ui-date ng-model="aDate">
-    
+
     <div>{{ aDate }}</div>
 
+    <div><a href="" ng-click="incDate()">Increase Date</a></div>
+
+   </div>
     <!-- Scripts -->
     <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
     <script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.min.js"></script>
     <script type="text/javascript" src="bower_components/angular/angular.js"></script>
     <script type="text/javascript" src="src/date.js"></script>
+    <script>
+    angular.module('Demo', ['ui.date'])
+    .controller('DemoCtrl', ['$scope', function($scope){
+      $scope.aDate = new Date();
+      $scope.incDate = function() {
+        $scope.aDate.setDate($scope.aDate.getDate()+1);
+      }
+    }])
+    </script>
   </body>
 
 </html>
diff --git a/src/date.js b/src/date.js
@@ -177,6 +177,20 @@ if (typeof module !== 'undefined' && typeof exports !== 'undefined' && module.ex
             }
           };
 
+          // Watch for changes to values in the date (and not just reference changes)
+          scope.$watch(function() {
+            if (controller && angular.isDate(controller.$modelValue)) {
+              return controller.$modelValue.getDate();
+            } else {
+              return null;
+            }
+          },
+            function() {
+              if (controller) {
+                controller.$render();
+              }
+            });
+
           // Watch for changes to the directives options
           scope.$watch(getOptions, initDateWidget, true);
         }

diff --git a/test/date.spec.js b/test/date.spec.js
@@ -259,6 +259,21 @@ describe('uiDate', function() {
         expect(element.datepicker('getDate')).toEqual(aDate);
       });
     });
+
+    it('should update the datepicker if the model changes', function() {
+      inject(function($compile, $rootScope) {
+        var aDate, element;
+        aDate = new Date(2010, 12, 1);
+        element = $compile('<input ui-date ng-model="x"/>')($rootScope);
+        $rootScope.$apply(function() {
+          $rootScope.x = aDate;
+        });
+        aDate.setDate(aDate.getDate() + 1);
+        $rootScope.$apply();
+        expect(element.datepicker('getDate')).toEqual(aDate);
+      });
+    });
+
     it('should put the date in the model', function() {
       inject(function($compile, $rootScope) {
         var aDate, element;