Angular Material 10 range datepicker y moment.js Error: date.getFullYear no es una función

Question

Intentando implementar Angular Material v10 datepicker con la opción rangePicker con moment.js Pero cuando uso moment en combinación con rangePicker me da este error.

Error: date.getFullYear is not a function

Este error ocurre cuando trato de seleccionar la segunda fechamatEndDate

Ejemplo modificado de Google Stackblitz que muestra el error:

https://stackblitz.com/edit/angular-imb7gg?file=src/app/datepicker-moment-example.ts

Answer 1

El selector de fecha de rango usa la estrategia de rango con incorrecto DateAdapter.

Para solucionarlo, debe proporcionar MAT_DATE_RANGE_SELECTION_STRATEGYtoken en el mismo nivel en el que proporcionó personalizado DateAdapter:

import {
  MAT_DATE_RANGE_SELECTION_STRATEGY,
  DefaultMatCalendarRangeStrategy
} from '@angular/material/datepicker';
...
providers: [
 { provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: DefaultMatCalendarRangeStrategy},
 { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
 ....

Se asegura de que la DefaultMatCalendarRangeStrategyclase obtenga MomentDateAdapter como DateAdapterimplementación en lugar deNativeDateAdapter

Stackblitz bifurcado