fix(datepicker): ngModel updates for empty input. Fixes angular#4643

jelbourn · Sep 15, 2015 · 7d39223 · 7d39223
1 parent 2732941
commit 7d39223
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 6 deletions.
diff --git a/src/components/datepicker/datePicker-theme.scss b/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}}';
   }

diff --git a/src/components/datepicker/datePicker.js b/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);

diff --git a/src/components/datepicker/datePicker.scss b/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 {

diff --git a/src/components/datepicker/datePicker.spec.js b/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);

diff --git a/src/components/datepicker/demoBasicUsage/index.html b/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>