fix(datepicker): error message alignment in md-input-container (#9504)

Fixes the datepicker error messages not being aligned with other `md-input-container` instances. The issue was caused by an unnecessary float on the input element and the calendar icon pushing down the messages. The fix removes the float and pulls the icon up with a margin while pushing it down via `top`.

Fixes #9342.

Author: crisbeto

src/components/datepicker/datePicker.scss

@@ -67,12 +67,18 @@ md-datepicker {
     }
 
     .md-datepicker-button {
-      // Prevents the button from wrapping around.
+      // Prevents the button from wrapping around, as well as it pushing
+      // down the error messages more than they should be.
       @include rtl(float, left, right);
-      margin-top: -$md-datepicker-border-bottom-gap / 2;
+      margin-top: $button-left-right-padding * -2;
+      top: $button-left-right-padding * 2 - $md-datepicker-border-bottom-gap / 2;
     }
   }
 
+  .md-input {
+    float: none;
+  }
+
   &._md-datepicker-has-calendar-icon {
     > label:not(.md-no-float):not(.md-container-ignore) {
       $width-offset: $md-datepicker-triangle-button-width * 2 + $md-datepicker-button-gap;
@@ -195,7 +201,7 @@ md-datepicker {
 }
 
 // Need crazy specificity to override .md-button.md-icon-button.
-// Only apply this high specifiy to the property we need to override.
+// Only apply this high specificity to the property we need to override.
 .md-datepicker-triangle-button.md-button.md-icon-button {
   height: $md-datepicker-triangle-button-width;
   width: $md-datepicker-triangle-button-width;