fix(datepicker): ngModel updates for empty input.

Fixes #4643. Closes #4648.

Author: jelbourn

src/components/datepicker/datePicker-theme.scss

@@ -7,6 +7,7 @@ md-datepicker.md-THEME_NAME-theme {
 .md-THEME_NAME-theme {
 
   .md-datepicker-input {
+    @include input-placeholder-color('{{foreground-3}}');
     color: '{{background-contrast}}';
     background: '{{background-color}}';
   }

src/components/datepicker/datePicker.js

@@ -331,7 +331,11 @@
     var parsedDate = this.dateLocale.parseDate(inputString);
     this.dateUtil.setDateTimeToMidnight(parsedDate);
 
-    if (this.dateUtil.isValidDate(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.dateUtil.isDateWithinRange(parsedDate, this.minDate, this.maxDate)) {
       this.ngModelCtrl.$setViewValue(parsedDate);

src/components/datepicker/datePicker.scss

@@ -174,9 +174,9 @@ md-datepicker[disabled] {
 // view while the pane is opening. This is done as a cue to users that the calendar is scrollable.
 .md-datepicker-calendar-pane {
   .md-calendar {
-    transform: translateY(150px);
-    transition: transform 0.4s $swift-ease-out-timing-function;
-    transition-delay: 0.1s;
+    transform: translateY(-85px);
+    transition: transform 0.65s $swift-ease-out-timing-function;
+    transition-delay: 0.125s;
   }
 
   &.md-pane-open .md-calendar {

src/components/datepicker/datePicker.spec.js

@@ -50,6 +50,14 @@ describe('md-date-picker', function() {
     expect(controller.inputElement.value).toBe(dateLocale.formatDate(initialDate));
   });
 
+  it('should set the ngModel value to null when the text input is emptied', function() {
+    controller.inputElement.value = '';
+    controller.ngInputElement.triggerHandler('input');
+    $timeout.flush();
+
+    expect(pageScope.myDate).toBeNull();
+  });
+
   it('should open and close the floating calendar pane element', function() {
     // We can asset that the calendarPane is in the DOM by checking if it has a height.
     expect(controller.calendarPane.offsetHeight).toBe(0);

src/components/datepicker/demoBasicUsage/index.html

@@ -5,10 +5,10 @@ <h4>Standard date-picker</h4>
     <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
 
     <h4>Disabled date-picker</h4>
-    <md-datepicker ng-model="myDate" placeholder="Enter date" disabled></md-datepicker>
+    <md-datepicker ng-model="myDate" md-placeholder="Enter date" disabled></md-datepicker>
 
     <h4>Date-picker with min date and max date</h4>
-    <md-datepicker ng-model="myDate" placeholder="Enter date"
+    <md-datepicker ng-model="myDate" md-placeholder="Enter date"
         md-min-date="minDate" md-max-date="maxDate"></md-datepicker>
   </md-content>
 </div>