Angular Material 10 intervalo datepicker e moment.js Erro: date.getFullYear não é uma função

Question

Tentando implementar o datepicker Angular Material v10 com a opção rangePicker com moment.js Mas quando eu uso moment em combinação com o rangePicker, ele me dá este erro.

Error: date.getFullYear is not a function

Este erro acontece quando tento selecionar a segunda datamatEndDate

Exemplo modificado do Google Stackblitz mostrando o erro:

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

Answer 1

O datepicker de intervalo usa a estratégia de intervalo com o erro DateAdapter.

Para corrigi-lo, você deve fornecer o MAT_DATE_RANGE_SELECTION_STRATEGYtoken no mesmo nível em que forneceu custom 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]},
 ....

Ele garante que a DefaultMatCalendarRangeStrategyclasse obtenha MomentDateAdapter como uma DateAdapterimplementação em vez deNativeDateAdapter

Stackblitz bifurcado