Use MatDateSelectionModel to model the selected value in MatDatepickerInput

Author: jaguima

src/material/datepicker/datepicker-input.ts

@@ -29,7 +29,13 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms';
-import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats, ThemePalette} from '@angular/material/core';
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MatSingleDateSelectionModel,
+  MatDateFormats,
+  ThemePalette,
+} from '@angular/material/core';
 import {MatFormField} from '@angular/material/form-field';
 import {MAT_INPUT_VALUE_ACCESSOR} from '@angular/material/input';
 import {Subscription} from 'rxjs';
@@ -123,25 +129,33 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
 
   /** The value of the input. */
   @Input()
-  get value(): D | null { return this._value; }
+  get value(): D | null { return this._value ? this._value.asDate() : null; }
   set value(value: D | null) {
-    value = this._dateAdapter.deserialize(value);
-    this._lastValueValid = !value || this._dateAdapter.isValid(value);
-    value = this._getValidDateOrNull(value);
-    const oldDate = this.value;
-    this._value = value;
-    this._formatValue(value);
-
+    value  = this._dateAdapter.deserialize(value);
+    const oldDate = this._value.asDate();
+    let isDifferent = false;
     if (!this._dateAdapter.sameDate(oldDate, value)) {
-      this._valueChange.emit(value);
+      isDifferent = true;
+    }
+    this._value.add(value);
+
+    this._lastValueValid = !this._value || this._value.isValid();
+
+    if (this._value) {
+      this._formatValue(this._value.asDate());
+    }
+
+    if (isDifferent) {
+      this._valueChange.emit(this.value);
     }
   }
-  private _value: D | null;
+  private _value: MatSingleDateSelectionModel<D>;
 
   /** The minimum valid date. */
   @Input()
   get min(): D | null { return this._min; }
   set min(value: D | null) {
+    value = this._dateAdapter.deserialize(value);
     this._min = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
     this._validatorOnChange();
   }
@@ -226,9 +240,9 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
 
   /** The form control validator for the date filter. */
   private _filterValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
-    const controlValue = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));
-    return !this._dateFilter || !controlValue || this._dateFilter(controlValue) ?
-        null : {'matDatepickerFilter': true};
+    const controlValueSelection = new MatSingleDateSelectionModel(this._dateAdapter, control.value);
+    return !this._dateFilter || !controlValueSelection.isValid() ||
+        this._dateFilter(controlValueSelection.asDate()) ? null : {'matDatepickerFilter': true};
   }
 
   /** The combined form control validator for this input. */
@@ -255,6 +269,8 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
     this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {
       this.value = this.value;
     });
+
+    this._value = new MatSingleDateSelectionModel(this._dateAdapter, null);
   }
 
   ngOnDestroy() {
@@ -320,14 +336,14 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
   }
 
   _onInput(value: string) {
-    let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
-    this._lastValueValid = !date || this._dateAdapter.isValid(date);
-    date = this._getValidDateOrNull(date);
-
-    if (!this._dateAdapter.sameDate(date, this._value)) {
-      this._value = date;
-      this._cvaOnChange(date);
-      this._valueChange.emit(date);
+    const dateSelection = new MatSingleDateSelectionModel(this._dateAdapter,
+      this._dateAdapter.parse(value, this._dateFormats.parse.dateInput));
+    this._lastValueValid = dateSelection.isValid();
+
+    if (!dateSelection.isSame(this._value)) {
+      this._value = dateSelection;
+      this._cvaOnChange(dateSelection.asDate());
+      this._valueChange.emit(dateSelection.asDate());
       this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
     } else {
       this._validatorOnChange();

src/material/datepicker/datepicker.spec.ts

@@ -1191,9 +1191,9 @@ describe('MatDatepicker', () => {
             .not.toContain('ng-invalid');
       }));
 
-      it('should update validity when switching between null and invalid', fakeAsync(() => {
+      it('should update validity when switching between valid and invalid', fakeAsync(() => {
         const inputEl = fixture.debugElement.query(By.css('input'))!.nativeElement;
-        inputEl.value = '';
+        inputEl.value = new Date(2010, JAN, 2).toDateString();
         dispatchFakeEvent(inputEl, 'input');
 
         fixture.detectChanges();
@@ -1211,7 +1211,7 @@ describe('MatDatepicker', () => {
 
         expect(testComponent.model.valid).toBe(false);
 
-        inputEl.value = '';
+        inputEl.value = new Date(2010, JAN, 2).toDateString();
         dispatchFakeEvent(inputEl, 'input');
 
         fixture.detectChanges();