fix(datepicker): range selection strategy not picking up custom date adapter (#19914)

The default date range selection strategy was provided at the module level which meant that it wouldn't pick up custom date adapters down in the DI tree. These changes provide the token at the level of the range picker instead.

Fixes #19902.

(cherry picked from commit 984ca88)

Author: crisbeto

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

@@ -9,6 +9,7 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {MatDatepickerBase, MatDatepickerContent, MatDatepickerControl} from './datepicker-base';
 import {MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, DateRange} from './date-selection-model';
+import {MAT_CALENDAR_RANGE_STRATEGY_PROVIDER} from './date-range-selection-strategy';
 
 /**
  * Input that can be associated with a date range picker.
@@ -29,7 +30,10 @@ export interface MatDateRangePickerInput<D> extends MatDatepickerControl<D> {
   exportAs: 'matDateRangePicker',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  providers: [MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER]
+  providers: [
+    MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER,
+    MAT_CALENDAR_RANGE_STRATEGY_PROVIDER,
+  ]
 })
 export class MatDateRangePicker<D> extends MatDatepickerBase<MatDateRangePickerInput<D>,
   DateRange<D>, D> {

src/material/datepicker/date-range-selection-strategy.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, InjectionToken} from '@angular/core';
+import {Injectable, InjectionToken, Optional, SkipSelf, FactoryProvider} from '@angular/core';
 import {DateAdapter} from '@angular/material/core';
 import {DateRange} from './date-selection-model';
 
@@ -70,3 +70,17 @@ export class DefaultMatCalendarRangeStrategy<D> implements MatDateRangeSelection
     return new DateRange<D>(start, end);
   }
 }
+
+
+/** @docs-private */
+export function MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY(
+  parent: MatDateRangeSelectionStrategy<unknown>, adapter: DateAdapter<unknown>) {
+  return parent || new DefaultMatCalendarRangeStrategy(adapter);
+}
+
+/** @docs-private */
+export const MAT_CALENDAR_RANGE_STRATEGY_PROVIDER: FactoryProvider = {
+  provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+  deps: [[new Optional(), new SkipSelf(), MAT_DATE_RANGE_SELECTION_STRATEGY], DateAdapter],
+  useFactory: MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY,
+};

src/material/datepicker/datepicker-module.ts

@@ -30,10 +30,6 @@ import {MatYearView} from './year-view';
 import {MatDateRangeInput} from './date-range-input';
 import {MatStartDate, MatEndDate} from './date-range-input-parts';
 import {MatDateRangePicker} from './date-range-picker';
-import {
-  MAT_DATE_RANGE_SELECTION_STRATEGY,
-  DefaultMatCalendarRangeStrategy
-} from './date-range-selection-strategy';
 
 
 @NgModule({
@@ -82,11 +78,7 @@ import {
   ],
   providers: [
     MatDatepickerIntl,
-    MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
-    {
-      provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
-      useClass: DefaultMatCalendarRangeStrategy
-    }
+    MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
   ],
   entryComponents: [
     MatDatepickerContent,

src/material/datepicker/public-api.ts

@@ -10,7 +10,11 @@ export * from './datepicker-module';
 export * from './calendar';
 export * from './calendar-body';
 export * from './datepicker';
-export * from './date-range-selection-strategy';
+export {
+  MAT_DATE_RANGE_SELECTION_STRATEGY,
+  MatDateRangeSelectionStrategy,
+  DefaultMatCalendarRangeStrategy,
+} from './date-range-selection-strategy';
 export * from './datepicker-animations';
 export {
   MAT_DATEPICKER_SCROLL_STRATEGY,