refactor(datepicker): implement range selection model

Implements the date range selection model in the individual range inputs.

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

@@ -213,3 +213,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: MatSingleDateSelectionModel<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/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,16 @@ 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 +213,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, S = D> {
   /** 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, S>,
       /** 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, S = 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<S, D> | 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, S>> =
+      new EventEmitter<MatDatepickerInputEvent<D, S>>();
 
   /** 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, S>> =
+      new EventEmitter<MatDatepickerInputEvent<D, S>>();
 
   /** 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<S, D>): 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: S): 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);
     }

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: MatSingleDateSelectionModel<unknown>, adapter: DateAdapter<unknown>): MatSingleDateSelectionModel<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>;

tools/public_api_guard/material/datepicker.d.ts

@@ -156,7 +156,7 @@ export declare class MatDatepickerContent<D> extends _MatDatepickerContentMixinB
     static ɵfac: i0.ɵɵFactoryDef<MatDatepickerContent<any>>;
 }
 
-export declare class MatDatepickerInput<D> extends MatDatepickerInputBase<D> {
+export declare class MatDatepickerInput<D> extends MatDatepickerInputBase<D | null> {
     _dateFilter: (date: D | null) => boolean;
     _datepicker: MatDatepicker<D>;
     protected _validator: ValidatorFn | null;
@@ -165,8 +165,9 @@ export declare class MatDatepickerInput<D> extends MatDatepickerInputBase<D> {
     max: D | null;
     min: D | null;
     constructor(elementRef: ElementRef<HTMLInputElement>, dateAdapter: DateAdapter<D>, dateFormats: MatDateFormats, _formField: MatFormField);
-    protected _assignModelValue(value: D | null): void;
+    protected _assignValueToModel(value: D | null): void;
     _getThemePalette(): ThemePalette;
+    protected _getValueFromModel(modelValue: D | null): D | null;
     protected _openPopup(): void;
     getConnectedOverlayOrigin(): ElementRef;
     getPopupConnectionElementRef(): ElementRef;
@@ -176,12 +177,12 @@ export declare class MatDatepickerInput<D> extends MatDatepickerInputBase<D> {
     static ɵfac: i0.ɵɵFactoryDef<MatDatepickerInput<any>>;
 }
 
-export declare class MatDatepickerInputEvent<D> {
-    target: MatDatepickerInputBase<D>;
+export declare class MatDatepickerInputEvent<D, S = D> {
+    target: MatDatepickerInputBase<D, S>;
     targetElement: HTMLElement;
     value: D | null;
     constructor(
-    target: MatDatepickerInputBase<D>,
+    target: MatDatepickerInputBase<D, S>,
     targetElement: HTMLElement);
 }
 
@@ -264,7 +265,9 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     static ɵfac: i0.ɵɵFactoryDef<MatDateRangeInput<any>>;
 }
 
-export declare class MatEndDate<D> extends _MatDateRangeInputBase<D> implements CanUpdateErrorState {
+export declare class MatEndDate<D> extends _MatDateRangeInputBase<D | null> implements CanUpdateErrorState {
+    protected _assignValueToModel: (value: D | null) => void;
+    protected _getValueFromModel: (modelValue: DateRange<D | null>) => D | null;
     protected _validator: ValidatorFn | null;
     static ngAcceptInputType_disabled: BooleanInput;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatEndDate<any>, "input[matEndDate]", never, {}, {}, never>;
@@ -329,7 +332,9 @@ export declare class MatMultiYearView<D> implements AfterContentInit, OnDestroy
     static ɵfac: i0.ɵɵFactoryDef<MatMultiYearView<any>>;
 }
 
-export declare class MatStartDate<D> extends _MatDateRangeInputBase<D> implements CanUpdateErrorState {
+export declare class MatStartDate<D> extends _MatDateRangeInputBase<D | null> implements CanUpdateErrorState {
+    protected _assignValueToModel: (value: D | null) => void;
+    protected _getValueFromModel: (modelValue: DateRange<D | null>) => D | null;
     protected _validator: ValidatorFn | null;
     getMirrorValue(): string;
     static ngAcceptInputType_disabled: BooleanInput;