fix(datepicker): improve error state updating. Fixes angular#5315

Author: jelbourn

src/components/datepicker/datePicker.js

@@ -265,7 +265,8 @@
       self.date = value;
       self.inputElement.value = self.dateLocale.formatDate(value);
       self.resizeInputElement();
-      self.setErrorFlags();
+
+      self.updateErrorState();
     };
   };
 
@@ -283,7 +284,7 @@
       self.inputElement.value = self.dateLocale.formatDate(date);
       self.closeCalendarPane();
       self.resizeInputElement();
-      self.inputContainer.classList.remove(INVALID_CLASS);
+      self.updateErrorState();
     });
 
     self.ngInputElement.on('input', angular.bind(self, self.resizeInputElement));
@@ -350,12 +351,19 @@
    * Sets the custom ngModel.$error flags to be consumed by ngMessages. Flags are:
    *   - mindate: whether the selected date is before the minimum date.
    *   - maxdate: whether the selected flag is after the maximum date.
+   *   - filtered: whether the selected date is allowed by the custom filtering function.
+   *   - valid: whether the entered text input is a valid date
+   *
+   * The 'required' flag is handled automatically by ngModel.
    *
    * @param {Date=} opt_date Date to check. If not given, defaults to the datepicker's model value.
    */
-  DatePickerCtrl.prototype.setErrorFlags = function(opt_date) {
+  DatePickerCtrl.prototype.updateErrorState = function(opt_date) {
     var date = opt_date || this.date;
 
+    // Clear any existing errors to get rid of anything that's no longer relevant.
+    this.clearErrorState();
+
     if (this.dateUtil.isValidDate(date)) {
       if (this.dateUtil.isValidDate(this.minDate)) {
         this.ngModelCtrl.$setValidity('mindate', date >= this.minDate);
@@ -366,11 +374,30 @@
       }
 
       if (angular.isFunction(this.dateFilter)) {
-        this.ngModelCtrl.$setValidity('filtered', this.dateFilter(this.date));
+        this.ngModelCtrl.$setValidity('filtered', this.dateFilter(date));
       }
+    } else {
+      // The date is counted as "not a valid date" if there is *something* set
+      // (i.e.., not null or undefined), but that something isn't a valid date.
+      this.ngModelCtrl.$setValidity('valid', date == null);
+    }
+
+    // TODO(jelbourn): Change this to clasList.toggle when we stop using PhantomJS in unit tests
+    // because it doesn't confirm to the DOMTokenList spec.
+    // See https://github.com/ariya/phantomjs/issues/12782.
+    if (!this.ngModelCtrl.$valid) {
+      this.inputContainer.classList.add(INVALID_CLASS);
     }
   };
 
+  /** Clears any error flags set by `updateErrorState`. */
+  DatePickerCtrl.prototype.clearErrorState = function() {
+    this.inputContainer.classList.remove(INVALID_CLASS);
+    ['mindate', 'maxdate', 'filtered', 'valid'].forEach(function(field) {
+      this.ngModelCtrl.$setValidity(field, true);
+    }, this);
+  };
+
   /** Resizes the input element based on the size of its content. */
   DatePickerCtrl.prototype.resizeInputElement = function() {
     this.inputElement.size = this.inputElement.value.length + EXTRA_INPUT_SIZE;
@@ -382,24 +409,24 @@
    */
   DatePickerCtrl.prototype.handleInputEvent = function() {
     var inputString = this.inputElement.value;
-    var parsedDate = this.dateLocale.parseDate(inputString);
+    var parsedDate = inputString ? this.dateLocale.parseDate(inputString) : null;
     this.dateUtil.setDateTimeToMidnight(parsedDate);
-    if (inputString === '') {
-      this.ngModelCtrl.$setViewValue(null);
-      this.date = null;
-      this.inputContainer.classList.remove(INVALID_CLASS);
-    } else if (this.dateUtil.isValidDate(parsedDate) &&
-        this.dateLocale.isDateComplete(inputString) && 
-        this.isDateEnabled(parsedDate)) {
+
+    // An input string is valid if it is either empty (representing no date)
+    // or if it parses to a valid date that the user is allowed to select.
+    var isValidInput = inputString == '' || (
+      this.dateUtil.isValidDate(parsedDate) &&
+      this.dateLocale.isDateComplete(inputString) &&
+      this.isDateEnabled(parsedDate)
+    );
+
+    // The datepicker's model is only updated when there is a valid input.
+    if (isValidInput) {
       this.ngModelCtrl.$setViewValue(parsedDate);
       this.date = parsedDate;
-      this.setErrorFlags();
-      this.inputContainer.classList.remove(INVALID_CLASS);
-    } else {
-      // If there's an input string, it's an invalid date.
-      this.setErrorFlags(parsedDate);
-      this.inputContainer.classList.toggle(INVALID_CLASS, inputString);
     }
+
+    this.updateErrorState(parsedDate);
   };
 
   /**

src/components/datepicker/datePicker.spec.js

@@ -245,7 +245,7 @@ describe('md-date-picker', function() {
       populateInputElement('6/1/2015');
       expect(controller.inputContainer).not.toHaveClass('md-datepicker-invalid');
 
-      populateInputElement('7');
+      populateInputElement('cheese');
       expect(controller.inputContainer).toHaveClass('md-datepicker-invalid');
     });
 
@@ -422,12 +422,13 @@ describe('md-date-picker', function() {
     });
 
     it('should remove the invalid state if present', function() {
-      populateInputElement('7');
+      populateInputElement('cheese');
       expect(controller.inputContainer).toHaveClass('md-datepicker-invalid');
 
       controller.openCalendarPane({
         target: controller.inputElement
       });
+
       scope.$emit('md-calendar-change', new Date());
       expect(controller.inputContainer).not.toHaveClass('md-datepicker-invalid');
     });

src/components/datepicker/demoBasicUsage/index.html

@@ -13,7 +13,7 @@ <h4>Date-picker with min date and max date</h4>
     <h4>Only weekends are selectable</h4>
     <md-datepicker ng-model="myDate" md-placeholder="Enter date"
         md-date-filter="onlyWeekendsPredicate"></md-datepicker>
-    
+
     <h4>Only weekends within given range are selectable</h4>
     <md-datepicker ng-model="myDate" md-placeholder="Enter date"
         md-min-date="minDate" md-max-date="maxDate"
@@ -26,6 +26,7 @@ <h4>With ngMessages</h4>
           md-date-filter="onlyWeekendsPredicate"></md-datepicker>
 
       <div class="validation-messages" ng-messages="myForm.dateField.$error">
+        <div ng-message="valid">The entered value is not a date!</div>
         <div ng-message="required">This date is required!</div>
         <div ng-message="mindate">Date is too early!</div>
         <div ng-message="maxdate">Date is too late!</div>