fix(ngModel): properly parse min/max date values as strings

Due to the nature of how date objects are rendered when JSON.stringify
is called, the resulting string contains two sets of quotes surrounding
it. This commit fixes that issue.

Closes angular#6755

Author: matsko

src/ng/directive/input.js

@@ -11,6 +11,7 @@
 var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;
 var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
 var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/;
+var ISO_DATE_REGEXP = /\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z)/;
 var DATE_REGEXP = /^(\d{4})-(\d{2})-(\d{2})$/;
 var DATETIMELOCAL_REGEXP = /^(\d{4})-(\d\d)-(\d\d)T(\d\d):(\d\d)(?::(\d\d))?$/;
 var WEEK_REGEXP = /^(\d{4})-W(\d\d)$/;
@@ -1036,6 +1037,15 @@ function createDateParser(regexp, mapping) {
     }
 
     if (isString(iso)) {
+      // When a date is JSON'ified to wraps itself inside of an extra
+      // set of double quotes. This makes the date parsing code unable
+      // to match the date string and parse it as a date.
+      if (iso.charAt(0) == '"' && iso.charAt(iso.length-1) == '"') {
+        iso = iso.substring(1, iso.length-1);
+      }
+      if (ISO_DATE_REGEXP.test(iso)) {
+        return new Date(iso);
+      }
       regexp.lastIndex = 0;
       parts = regexp.exec(iso);
 
@@ -1082,7 +1092,7 @@ function createDateInputType(type, regexp, parseDate, format) {
       return '';
     });
 
-    if (attr.min || attr.ngMin) {
+    if (isDefined(attr.min) || attr.ngMin) {
       var minVal;
       ctrl.$validators.min = function(value) {
         return ctrl.$isEmpty(value) || isUndefined(minVal) || parseDate(value) >= minVal;
@@ -1093,7 +1103,7 @@ function createDateInputType(type, regexp, parseDate, format) {
       });
     }
 
-    if (attr.max || attr.ngMax) {
+    if (isDefined(attr.max) || attr.ngMax) {
       var maxVal;
       ctrl.$validators.max = function(value) {
         return ctrl.$isEmpty(value) || isUndefined(maxVal) || parseDate(value) <= maxVal;

test/ng/directive/inputSpec.js

@@ -2491,32 +2491,40 @@ describe('input', function() {
       });
     });
 
-    it('should validate even if max value changes on-the-fly', function(done) {
+    it('should validate even if max value changes on-the-fly', function() {
       scope.max = '2013-01-01T01:02:00';
       compileInput('<input type="datetime-local" ng-model="value" name="alias" max="{{max}}" />');
 
       changeInputValueTo('2014-01-01T12:34:00');
       expect(inputElm).toBeInvalid();
 
       scope.max = '2001-01-01T01:02:00';
-      scope.$digest(function () {
-        expect(inputElm).toBeValid();
-        done();
-      });
+      scope.$digest();
+
+      expect(inputElm).toBeInvalid();
+
+      scope.max = '2024-01-01T01:02:00';
+      scope.$digest();
+
+      expect(inputElm).toBeValid();
     });
 
-    it('should validate even if min value changes on-the-fly', function(done) {
+    it('should validate even if min value changes on-the-fly', function() {
       scope.min = '2013-01-01T01:02:00';
       compileInput('<input type="datetime-local" ng-model="value" name="alias" min="{{min}}" />');
 
       changeInputValueTo('2010-01-01T12:34:00');
       expect(inputElm).toBeInvalid();
 
       scope.min = '2014-01-01T01:02:00';
-      scope.$digest(function () {
-        expect(inputElm).toBeValid();
-        done();
-      });
+      scope.$digest();
+
+      expect(inputElm).toBeInvalid();
+
+      scope.min = '2009-01-01T01:02:00';
+      scope.$digest();
+
+      expect(inputElm).toBeValid();
     });
   });
 
@@ -2837,6 +2845,23 @@ describe('input', function() {
         expect(+scope.value).toBe(+new Date(2000, 0, 1));
         expect(scope.form.alias.$error.min).toBeFalsy();
       });
+
+      it('should parse ISO-based date strings as a valid min date value', inject(function($rootScope) {
+        var scope = $rootScope.$new();
+        var element = $compile('<form name="myForm">' +
+                                 '<input name="myControl" type="date" min="{{ min }}" ng-model="value">' +
+                               '</form>')(scope);
+
+        var inputElm = element.find('input');
+
+        scope.value = new Date(2010, 1, 1, 0, 0, 0);
+        scope.min = new Date(2014, 10, 10, 0, 0, 0);
+        scope.$digest();
+
+        expect(scope.myForm.myControl.$error.min).toBeTruthy();
+
+        dealoc(element);
+      }));
     });
 
     describe('max', function (){
@@ -2857,34 +2882,59 @@ describe('input', function() {
         expect(+scope.value).toBe(+new Date(2000, 0, 1));
         expect(scope.form.alias.$error.max).toBeFalsy();
       });
+
+      it('should parse ISO-based date strings as a valid max date value', inject(function($rootScope) {
+        var scope = $rootScope.$new();
+        var element = $compile('<form name="myForm">' +
+                                 '<input name="myControl" type="date" max="{{ max }}" ng-model="value">' +
+                               '</form>')(scope);
+
+        var inputElm = element.find('input');
+
+        scope.value = new Date(2020, 1, 1, 0, 0, 0);
+        scope.max = new Date(2014, 10, 10, 0, 0, 0);
+        scope.$digest();
+
+        expect(scope.myForm.myControl.$error.max).toBeTruthy();
+
+        dealoc(element);
+      }));
     });
 
-    it('should validate even if max value changes on-the-fly', function(done) {
+    it('should validate even if max value changes on-the-fly', function() {
       scope.max = '2013-01-01';
       compileInput('<input type="date" ng-model="value" name="alias" max="{{max}}" />');
 
       changeInputValueTo('2014-01-01');
       expect(inputElm).toBeInvalid();
 
       scope.max = '2001-01-01';
-      scope.$digest(function () {
-        expect(inputElm).toBeValid();
-        done();
-      });
+      scope.$digest();
+
+      expect(inputElm).toBeInvalid();
+
+      scope.max = '2021-01-01';
+      scope.$digest();
+
+      expect(inputElm).toBeValid();
     });
 
-    it('should validate even if min value changes on-the-fly', function(done) {
+    it('should validate even if min value changes on-the-fly', function() {
       scope.min = '2013-01-01';
       compileInput('<input type="date" ng-model="value" name="alias" min="{{min}}" />');
 
       changeInputValueTo('2010-01-01');
       expect(inputElm).toBeInvalid();
 
       scope.min = '2014-01-01';
-      scope.$digest(function () {
-        expect(inputElm).toBeValid();
-        done();
-      });
+      scope.$digest();
+
+      expect(inputElm).toBeInvalid();
+
+      scope.min = '2009-01-01';
+      scope.$digest();
+
+      expect(inputElm).toBeValid();
     });
   });