Angular Material 10 范围 datepicker 和 moment.js 错误：date.getFullYear 不是函数

【问题标题】：Angular Material 10 range datepicker and moment.js Error: date.getFullYear is not a functionAngular Material 10 范围 datepicker 和 moment.js 错误：date.getFullYear 不是函数
【发布时间】：2020-12-16 05:27:05
【问题描述】：

尝试使用 moment.js 的 rangePicker 选项实现 Angular Material v10 datepicker 但是当我将 moment 与 rangePicker 结合使用时，它会给我这个错误。

Error: date.getFullYear is not a function

当我尝试选择第二个日期matEndDate时发生此错误

显示错误的修改后的 Google Stackblitz 示例：

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

【问题讨论】：

标签： javascript angular angular-material momentjs

【解决方案1】：

范围日期选择器使用范围策略错误的DateAdapter。

为了修复它，您应该在 与您提供自定义 DateAdapter 的同一级别 上提供 MAT_DATE_RANGE_SELECTION_STRATEGY 令牌：

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]},
 ....

它确保 DefaultMatCalendarRangeStrategy 类将 MomentDateAdapter 作为 DateAdapter 实现而不是 NativeDateAdapter

Forked Stackblitz

【讨论】：

工作就像一个魅力，我看到 NativeDateAdapter 错误，但我只是假设 MomentDateAdapter 继承或什么。