fix(datepicker): change event dispatched before value is formatted (#19187)

Fixes the `dateChange` event being fired before the value is assigned to the native input value.

Author: crisbeto

src/material/datepicker/datepicker-input-base.ts

@@ -196,9 +196,9 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
         const value = this._getValueFromModel(event.selection);
         this._cvaOnChange(value);
         this._onTouched();
+        this._formatValue(value);
         this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
         this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
-        this._formatValue(value);
 
         if (this._outsideValueChanged) {
           this._outsideValueChanged();

src/material/datepicker/datepicker.spec.ts

@@ -1475,6 +1475,22 @@ describe('MatDatepicker', () => {
         expect(testComponent.onDateInput).toHaveBeenCalledTimes(1);
       });
 
+      it('should have updated the native input value when the dateChange event is emitted', () => {
+        let valueDuringChangeEvent = '';
+
+        (testComponent.onDateChange as jasmine.Spy).and.callFake(() => {
+          valueDuringChangeEvent = inputEl.value;
+        });
+
+        const model = fixture.debugElement.query(By.directive(MatDatepicker))
+          .injector.get<MatDateSelectionModel<Date>>(MatDateSelectionModel);
+
+        model.updateSelection(new Date(2020, 0, 1), null);
+        fixture.detectChanges();
+
+        expect(valueDuringChangeEvent).toBe('1/1/2020');
+      });
+
     });
 
     describe('with ISO 8601 strings as input', () => {