fix(datepicker): propagate type changes to the input

Author: matheo

libs/datepicker/src/lib/date-range-input.ts

@@ -229,6 +229,8 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
   /** Emits when the input's state has changed. */
   stateChanges = new Subject<void>();
 
+  type: any; // unused prop in the range
+
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
     private _elementRef: ElementRef<HTMLElement>,

libs/datepicker/src/lib/datepicker-base.ts

@@ -248,6 +248,7 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
 
 /** Form control that can be associated with a datepicker. */
 export interface MatDatepickerControl<D> {
+  type: MatCalendarType;
   getStartValue(): D | null;
   getThemePalette(): ThemePalette;
   min: D | null;
@@ -498,6 +499,10 @@ export abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S,
       }
     }
 
+    if (this.datepickerInput.type !== this.type) {
+      this.datepickerInput.type = this.type;
+    }
+
     this.stateChanges.next(undefined);
   }
 
@@ -543,6 +548,7 @@ export abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S,
     }
     this._inputStateChanges.unsubscribe();
     this.datepickerInput = input;
+    this.datepickerInput.type = this.type;
     this._inputStateChanges =
         input.stateChanges.subscribe(() => this.stateChanges.next(undefined));
     return this._model;

libs/datepicker/src/lib/datepicker-input-base.ts

@@ -120,8 +120,14 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
   stateChanges = new Subject<void>();
 
   /** The type of value handled by the calendar. */
-  type: MatCalendarType = 'date';
-
+  set type(type: MatCalendarType) {
+    this._type = type;
+    if (this.value) {
+      this._formatValue(this.value);
+    }
+  }
+  protected _type: MatCalendarType = 'date';
+    
   _onTouched = () => {};
   _validatorOnChange = () => {};
 
@@ -261,14 +267,14 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
   }
 
   getUnit(): DateUnit {
-    switch (this.type) {
+    switch (this._type) {
       case 'date':
         return 'day';
       case 'datetime':
       case 'time':
         return 'minute';
       default:
-        return this.type;
+        return this._type;
     }
   }
 
@@ -313,7 +319,7 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
 
   _onInput(value: string) {
     const lastValueWasValid = this._lastValueValid;
-    let date = this._dateAdapter.parse(value, this._dateFormats.parse[`${this.type}Input`]);
+    let date = this._dateAdapter.parse(value, this._dateFormats.parse[`${this._type}Input`]);
     this._lastValueValid = this._isValidValue(date);
     date = this._dateAdapter.getValidDateOrNull(date);
 
@@ -351,7 +357,7 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
   /** Formats a value and sets it on the input element. */
   protected _formatValue(value: D | null) {
     this._elementRef.nativeElement.value = value
-      ? this._dateAdapter.format(value, this._dateFormats.display[`${this.type}Input`])
+      ? this._dateAdapter.format(value, this._dateFormats.display[`${this._type}Input`])
       : '';
   }
 

libs/datepicker/src/lib/datepicker-input.ts

@@ -81,7 +81,6 @@ export class MatDatepickerInput<D> extends MatDatepickerInputBase<D | null, D>
   set matDatepicker(datepicker: MatDatepickerPanel<MatDatepickerControl<D>, D | null, D>) {
     if (datepicker) {
       this._datepicker = datepicker;
-      this.type = datepicker.type;
       this._closedSubscription = datepicker.closedStream.subscribe(() => this._onTouched());
       this._registerModel(datepicker.registerInput(this));
     }