本文介绍了Angular Material 10 范围 datepicker 和 moment.js 错误:date.getFullYear 不是函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

Trying to implement Angular Material v10 datepicker with the rangePicker option with moment.jsBut when I use moment in combination with the rangePicker it gives me this error.

错误:date.getFullYear 不是函数

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

This error happens when I try to select the second date matEndDate

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

Modified Google Stackblitz example showing the error:

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

推荐答案

Range datepicker 使用了错误的 DateAdapter 范围策略.

Range datepicker uses range strategy with wrong DateAdapter.

为了修复它,您应该在您提供自定义 DateAdapter同一级别上提供 MAT_DATE_RANGE_SELECTION_STRATEGY 令牌:

In order to fix it you should provide MAT_DATE_RANGE_SELECTION_STRATEGY token on the same level where you provided 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]},
 ....

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

It makes sure that DefaultMatCalendarRangeStrategy class will get MomentDateAdapter as a DateAdapter implementation instead of NativeDateAdapter

分叉的 Stackblitz

这篇关于Angular Material 10 范围 datepicker 和 moment.js 错误:date.getFullYear 不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-01 12:37