Angular-calendar短日期格式失效，报monthViewDayNumber无效错误

问题原因 #

你遇到的错误是因为自定义的CustomDateFormatter类没有继承CalendarDateFormatter基类。angular-calendar会校验所有官方定义的格式化方法是否存在，即使你不需要重写某个方法，也必须通过继承基类来保证这些方法的默认实现存在，否则框架会判定该格式化器无效。

解决步骤 #

修改自定义日期格式化器代码，让它继承CalendarDateFormatter基类：

修改后的自定义日期格式化器代码 #

import { formatDate } from '@angular/common';
import { Injectable } from '@angular/core';
import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';

@Injectable()
export class CustomDateFormatter extends CalendarDateFormatter {
  // 重写需要自定义的格式化方法

  public monthViewColumnHeader({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'EEE', locale);
  }

  public monthViewTitle({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'MMM y', locale);
  }

  public weekViewColumnHeader({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'EEE', locale);
  }

  public dayViewHour({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'HH:mm', locale);
  }
}

说明 #

继承基类后，所有你没有重写的格式化方法（比如monthViewDayNumber）会自动使用基类的默认实现，这样框架就不会再抛出无效格式化器的错误，同时你依然可以保留自己需要的自定义格式逻辑。

内容的提问来源于stack exchange，提问作者J.C