fix(datepicker): update error state only after $validate has run

- only decorate with `md-datepicker-invalid` class (red underline)
  - if the control has been `$touched` or `$submitted`
- this improves the behavior when the `ng-model` value changes programmatically

Fixes #10360

Author: Splaktar

src/components/datepicker/js/datepickerDirective.js

@@ -664,7 +664,8 @@
       this.ngModelCtrl.$setValidity('valid', date == null);
     }
 
-    angular.element(this.inputContainer).toggleClass(INVALID_CLASS, !this.ngModelCtrl.$valid);
+    angular.element(this.inputContainer).toggleClass(INVALID_CLASS,
+      this.ngModelCtrl.$invalid && (this.ngModelCtrl.$touched || this.ngModelCtrl.$submitted));
   };
 
   /**
@@ -989,12 +990,16 @@
    * @param {Date=} value Value that was set to the model.
    */
   DatePickerCtrl.prototype.onExternalChange = function(value) {
+    var self = this;
     var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone');
 
     this.date = value;
     this.inputElement.value = this.locale.formatDate(value, timezone);
     this.mdInputContainer && this.mdInputContainer.setHasValue(!!value);
     this.resizeInputElement();
-    this.updateErrorState();
+    // This is often called from the $formatters section of the $validators pipeline.
+    // In that case, we need to delay to let $render and $validate run, so that the checks for
+    // error state are accurate.
+    this.$mdUtil.nextTick(function() {self.updateErrorState();}, false, self.$scope);
   };
 })();

src/components/datepicker/js/datepickerDirective.spec.js

@@ -678,6 +678,7 @@ describe('md-datepicker', function() {
       });
 
       scope.$emit('md-calendar-change', new Date());
+      $timeout.flush();
       expect(controller.inputContainer).not.toHaveClass('md-datepicker-invalid');
     });
   });