refactor: tweak date selection model signature and implement model in range input

Reworks the signature of the date selection model to make it easier to consume in the different datepicker input types.

Also wires up the individual range inputs with their model.

Author: crisbeto

src/dev-app/datepicker/datepicker-demo.ts

@@ -59,8 +59,8 @@ export class DatepickerDemo {
       return !(date.getFullYear() % 2) && Boolean(date.getMonth() % 2) && !(date.getDate() % 2);
     }
 
-  onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
-  onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;
+  onDateInput = (e: MatDatepickerInputEvent<Date | null>) => this.lastDateInput = e.value;
+  onDateChange = (e: MatDatepickerInputEvent<Date | null>) => this.lastDateChange = e.value;
 
   // pass custom header component type as input
   customHeader = CustomHeader;

src/material/core/datetime/date-selection-model.ts

@@ -26,8 +26,6 @@ export class DateRange<D> {
     readonly end: D | null) {}
 }
 
-type ExtractDateTypeFromSelection<T> = T extends DateRange<infer D> ? D : NonNullable<T>;
-
 /** Event emitted by the date selection model when its selection changes. */
 export interface DateSelectionModelChange<S> {
   /** New value for the selection. */
@@ -38,7 +36,7 @@ export interface DateSelectionModelChange<S> {
 }
 
 /** A selection model containing a date selection. */
-export abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSelection<S>>
+export abstract class MatDateSelectionModel<D, S = D>
     implements OnDestroy {
   private _selectionChanged = new Subject<DateSelectionModelChange<S>>();
 
@@ -85,7 +83,7 @@ export abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSelection<
 
 /**  A selection model that contains a single date. */
 @Injectable()
-export class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | null, D> {
+export class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | null> {
   constructor(adapter: DateAdapter<D>) {
     super(adapter, null);
   }
@@ -128,7 +126,7 @@ export class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | nu
 
 /**  A selection model that contains a date range. */
 @Injectable()
-export class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRange<D>, D> {
+export class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<D, DateRange<D>> {
   constructor(adapter: DateAdapter<D>) {
     super(adapter, new DateRange<D>(null, null));
   }
@@ -213,3 +211,17 @@ export const MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider = {
   deps: [[new Optional(), new SkipSelf(), MatDateSelectionModel], DateAdapter],
   useFactory: MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY,
 };
+
+
+/** @docs-private */
+export function MAT_RANGE_DATE_SELECTION_MODEL_FACTORY(
+    parent: MatRangeDateSelectionModel<unknown>, adapter: DateAdapter<unknown>) {
+  return parent || new MatRangeDateSelectionModel(adapter);
+}
+
+/** Used to provide a range selection model to a component. */
+export const MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider = {
+  provide: MatDateSelectionModel,
+  deps: [[new Optional(), new SkipSelf(), MatDateSelectionModel], DateAdapter],
+  useFactory: MAT_RANGE_DATE_SELECTION_MODEL_FACTORY,
+};

src/material/datepicker/calendar.ts

@@ -305,7 +305,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
               @Optional() private _dateAdapter: DateAdapter<D>,
               @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
               private _changeDetectorRef: ChangeDetectorRef,
-              private _model: MatDateSelectionModel<D | null, D>) {
+              private _model: MatDateSelectionModel<D | null>) {
 
     if (!this._dateAdapter) {
       throw createMissingDateImplError('DateAdapter');

src/material/datepicker/date-range-input-parts.ts

@@ -34,6 +34,8 @@ import {
   DateAdapter,
   MatDateFormats,
   ErrorStateMatcher,
+  DateRange,
+  MatDateSelectionModel,
 } from '@angular/material/core';
 import {BooleanInput} from '@angular/cdk/coercion';
 import {MatDatepickerInputBase} from './datepicker-input-base';
@@ -58,8 +60,8 @@ export const MAT_DATE_RANGE_INPUT_PARENT =
  * Base class for the individual inputs that can be projected inside a `mat-date-range-input`.
  */
 @Directive()
-class MatDateRangeInputPartBase<D> extends MatDatepickerInputBase<D> implements OnInit, DoCheck {
-  protected _validator: ValidatorFn | null;
+class MatDateRangeInputPartBase<D> extends MatDatepickerInputBase<D | null, DateRange<D | null>>
+  implements OnInit, DoCheck {
 
   /** @docs-private */
   ngControl: NgControl;
@@ -75,8 +77,13 @@ class MatDateRangeInputPartBase<D> extends MatDatepickerInputBase<D> implements
     @Optional() public _parentForm: NgForm,
     @Optional() public _parentFormGroup: FormGroupDirective,
     @Optional() dateAdapter: DateAdapter<D>,
-    @Optional() @Inject(MAT_DATE_FORMATS) dateFormats: MatDateFormats) {
+    @Optional() @Inject(MAT_DATE_FORMATS) dateFormats: MatDateFormats,
+
+    // TODO(crisbeto): this will be provided by the datepicker eventually.
+    // We provide it here for the moment so we have something to test against.
+    model: MatDateSelectionModel<DateRange<D | null>>) {
     super(elementRef, dateAdapter, dateFormats);
+    super._registerModel(model);
   }
 
   ngOnInit() {
@@ -123,9 +130,11 @@ class MatDateRangeInputPartBase<D> extends MatDatepickerInputBase<D> implements
     this._rangeInput._openDatepicker();
   }
 
-  protected _assignModelValue(_model: D | null): void {
-    // TODO(crisbeto): implement
-  }
+  // Dummy property implementations since we can't pass an abstract class
+  // into a mixin. These are overridden by the individual input classes.
+  protected _validator: ValidatorFn | null;
+  protected _assignValueToModel: (_value: D | null) => void;
+  protected _getValueFromModel: (_modelValue: DateRange<D | null>) => D | null;
 }
 
 const _MatDateRangeInputBase:
@@ -157,9 +166,17 @@ const _MatDateRangeInputBase:
     {provide: NG_VALIDATORS, useExisting: MatStartDate, multi: true}
   ]
 })
-export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements CanUpdateErrorState {
+export class MatStartDate<D> extends _MatDateRangeInputBase<D | null>
+  implements CanUpdateErrorState {
   // TODO(crisbeto): start-range-specific validators should go here.
   protected _validator = Validators.compose([this._parseValidator]);
+  protected _getValueFromModel = (modelValue: DateRange<D | null>) => modelValue.start;
+
+  protected _assignValueToModel = (value: D | null) => {
+    if (this._model) {
+      this._model.updateSelection(new DateRange(value, this._model.selection.end), this);
+    }
+  }
 
   /** Gets the value that should be used when mirroring the input's size. */
   getMirrorValue(): string {
@@ -197,9 +214,15 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements CanUpd
     {provide: NG_VALIDATORS, useExisting: MatEndDate, multi: true}
   ]
 })
-export class MatEndDate<D> extends _MatDateRangeInputBase<D> implements CanUpdateErrorState {
+export class MatEndDate<D> extends _MatDateRangeInputBase<D | null> implements CanUpdateErrorState {
   // TODO(crisbeto): end-range-specific validators should go here.
   protected _validator = Validators.compose([this._parseValidator]);
+  protected _getValueFromModel = (modelValue: DateRange<D | null>) => modelValue.end;
+  protected _assignValueToModel = (value: D | null) => {
+    if (this._model) {
+      this._model.updateSelection(new DateRange(this._model.selection.start, value), this);
+    }
+  }
 
   static ngAcceptInputType_disabled: BooleanInput;
 }

src/material/datepicker/date-range-input.ts

@@ -19,7 +19,7 @@ import {
   Self,
 } from '@angular/core';
 import {MatFormFieldControl, MatFormField} from '@angular/material/form-field';
-import {DateRange} from '@angular/material/core';
+import {DateRange, MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER} from '@angular/material/core';
 import {NgControl, ControlContainer} from '@angular/forms';
 import {Subject} from 'rxjs';
 import {coerceBooleanProperty, BooleanInput} from '@angular/cdk/coercion';
@@ -49,6 +49,10 @@ let nextUniqueId = 0;
   providers: [
     {provide: MatFormFieldControl, useExisting: MatDateRangeInput},
     {provide: MAT_DATE_RANGE_INPUT_PARENT, useExisting: MatDateRangeInput},
+
+    // TODO(crisbeto): this will be provided by the datepicker eventually.
+    // We provide it here for the moment so we have something to test against.
+    MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER,
   ]
 })
 export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,

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

@@ -39,13 +39,13 @@ import {createMissingDateImplError} from './datepicker-errors';
  * input or change event because the event may have been triggered by the user clicking on the
  * calendar popup. For consistency, we always use MatDatepickerInputEvent instead.
  */
-export class MatDatepickerInputEvent<D> {
+export class MatDatepickerInputEvent<D, M = any> {
   /** The new value for the target datepicker input. */
   value: D | null;
 
   constructor(
       /** Reference to the datepicker input component that emitted the event. */
-      public target: MatDatepickerInputBase<D>,
+      public target: MatDatepickerInputBase<D, M>,
       /** Reference to the native input element associated with the datepicker input. */
       public targetElement: HTMLElement) {
     this.value = this.target.value;
@@ -54,11 +54,13 @@ export class MatDatepickerInputEvent<D> {
 
 /** Base class for datepicker inputs. */
 @Directive()
-export abstract class MatDatepickerInputBase<D> implements ControlValueAccessor, OnDestroy,
-  Validator {
+export abstract class MatDatepickerInputBase<D, M = D>
+  implements ControlValueAccessor, OnDestroy, Validator {
   /** The value of the input. */
   @Input()
-  get value(): D | null { return this._model ? this._model.selection : this._pendingValue; }
+  get value(): D | null {
+    return this._model ? this._getValueFromModel(this._model.selection) : this._pendingValue;
+  }
   set value(value: D | null) {
     value = this._dateAdapter.deserialize(value);
     this._lastValueValid = !value || this._dateAdapter.isValid(value);
@@ -71,7 +73,7 @@ export abstract class MatDatepickerInputBase<D> implements ControlValueAccessor,
       this._valueChange.emit(value);
     }
   }
-  protected _model: MatDateSelectionModel<D | null, D> | undefined;
+  protected _model: MatDateSelectionModel<M> | undefined;
 
   /** Whether the datepicker-input is disabled. */
   @Input()
@@ -96,12 +98,12 @@ export abstract class MatDatepickerInputBase<D> implements ControlValueAccessor,
   private _disabled: boolean;
 
   /** Emits when a `change` event is fired on this `<input>`. */
-  @Output() readonly dateChange: EventEmitter<MatDatepickerInputEvent<D>> =
-      new EventEmitter<MatDatepickerInputEvent<D>>();
+  @Output() readonly dateChange: EventEmitter<MatDatepickerInputEvent<D, M>> =
+      new EventEmitter<MatDatepickerInputEvent<D, M>>();
 
   /** Emits when an `input` event is fired on this `<input>`. */
-  @Output() readonly dateInput: EventEmitter<MatDatepickerInputEvent<D>> =
-      new EventEmitter<MatDatepickerInputEvent<D>>();
+  @Output() readonly dateInput: EventEmitter<MatDatepickerInputEvent<D, M>> =
+      new EventEmitter<MatDatepickerInputEvent<D, M>>();
 
   /** Emits when the value changes (either due to user input or programmatic change). */
   _valueChange = new EventEmitter<D | null>();
@@ -129,7 +131,7 @@ export abstract class MatDatepickerInputBase<D> implements ControlValueAccessor,
         null : {'matDatepickerParse': {'text': this._elementRef.nativeElement.value}};
   }
 
-  protected _registerModel(model: MatDateSelectionModel<D | null, D>): void {
+  protected _registerModel(model: MatDateSelectionModel<M>): void {
     this._model = model;
     this._valueChangesSubscription.unsubscribe();
 
@@ -139,11 +141,12 @@ export abstract class MatDatepickerInputBase<D> implements ControlValueAccessor,
 
     this._valueChangesSubscription = this._model.selectionChanged.subscribe(event => {
       if (event.source !== this) {
-        this._cvaOnChange(event.selection);
+        const value = this._getValueFromModel(event.selection);
+        this._cvaOnChange(value);
         this._onTouched();
         this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
         this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
-        this._formatValue(event.selection);
+        this._formatValue(value);
       }
     });
   }
@@ -152,7 +155,10 @@ export abstract class MatDatepickerInputBase<D> implements ControlValueAccessor,
   protected abstract _openPopup(): void;
 
   /** Assigns a value to the input's model. */
-  protected abstract _assignModelValue(model: D | null): void;
+  protected abstract _assignValueToModel(model: D | null): void;
+
+  /** Converts a value from the model into a native value for the input. */
+  protected abstract _getValueFromModel(modelValue: M): D | null;
 
   /** The combined form control validator for this input. */
   protected abstract _validator: ValidatorFn | null;
@@ -272,7 +278,7 @@ export abstract class MatDatepickerInputBase<D> implements ControlValueAccessor,
     // We may get some incoming values before the model was
     // assigned. Save the value so that we can assign it later.
     if (this._model) {
-      this._assignModelValue(value);
+      this._assignValueToModel(value);
       this._pendingValue = null;
     } else {
       this._pendingValue = value;

src/material/datepicker/datepicker-input.ts

@@ -69,7 +69,7 @@ export const MAT_DATEPICKER_VALIDATORS: any = {
   },
   exportAs: 'matDatepickerInput',
 })
-export class MatDatepickerInput<D> extends MatDatepickerInputBase<D> {
+export class MatDatepickerInput<D> extends MatDatepickerInputBase<D | null> {
   /** The datepicker that this input is associated with. */
   @Input()
   set matDatepicker(datepicker: MatDatepicker<D>) {
@@ -170,7 +170,11 @@ export class MatDatepickerInput<D> extends MatDatepickerInputBase<D> {
     }
   }
 
-  protected _assignModelValue(value: D | null): void {
+  protected _getValueFromModel(modelValue: D | null): D | null {
+    return modelValue;
+  }
+
+  protected _assignValueToModel(value: D | null): void {
     if (this._model) {
       this._model.updateSelection(value, this);
     }

src/material/datepicker/datepicker.ts

@@ -300,7 +300,7 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
               @Optional() private _dateAdapter: DateAdapter<D>,
               @Optional() private _dir: Directionality,
               @Optional() @Inject(DOCUMENT) private _document: any,
-              private _model: MatDateSelectionModel<D | null, D>) {
+              private _model: MatDateSelectionModel<D | null>) {
     if (!this._dateAdapter) {
       throw createMissingDateImplError('DateAdapter');
     }
@@ -334,7 +334,7 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
    * @param input The datepicker input to register with this datepicker.
    * @returns Selection model that the input should hook itself up to.
    */
-  _registerInput(input: MatDatepickerInput<D>): MatDateSelectionModel<D | null, D> {
+  _registerInput(input: MatDatepickerInput<D>): MatDateSelectionModel<D | null> {
     if (this._datepickerInput) {
       throw Error('A MatDatepicker can only be associated with a single input.');
     }

tools/public_api_guard/material/core.d.ts

@@ -211,6 +211,10 @@ export declare const MAT_NATIVE_DATE_FORMATS: MatDateFormats;
 
 export declare const MAT_OPTION_PARENT_COMPONENT: InjectionToken<MatOptionParentComponent>;
 
+export declare function MAT_RANGE_DATE_SELECTION_MODEL_FACTORY(parent: MatRangeDateSelectionModel<unknown>, adapter: DateAdapter<unknown>): MatRangeDateSelectionModel<unknown>;
+
+export declare const MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider;
+
 export declare const MAT_RIPPLE_GLOBAL_OPTIONS: InjectionToken<RippleGlobalOptions>;
 
 export declare function MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(parent: MatSingleDateSelectionModel<unknown>, adapter: DateAdapter<unknown>): MatSingleDateSelectionModel<unknown>;
@@ -235,7 +239,7 @@ export declare type MatDateFormats = {
     };
 };
 
-export declare abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSelection<S>> implements OnDestroy {
+export declare abstract class MatDateSelectionModel<D, S = D> implements OnDestroy {
     protected readonly adapter: DateAdapter<D>;
     readonly selection: S;
     selectionChanged: Observable<DateSelectionModelChange<S>>;
@@ -347,7 +351,7 @@ export declare class MatPseudoCheckboxModule {
 
 export declare type MatPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
 
-export declare class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRange<D>, D> {
+export declare class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<D, DateRange<D>> {
     constructor(adapter: DateAdapter<D>);
     add(date: D | null): void;
     isComplete(): boolean;
@@ -383,7 +387,7 @@ export declare class MatRippleModule {
     static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatRippleModule, [typeof i1.MatRipple], [typeof i2.MatCommonModule, typeof i3.PlatformModule], [typeof i1.MatRipple, typeof i2.MatCommonModule]>;
 }
 
-export declare class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | null, D> {
+export declare class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | null> {
     constructor(adapter: DateAdapter<D>);
     add(date: D | null): void;
     isComplete(): boolean;