时间戳

首页 > 解决方案 > 如何在没有 moment.js 依赖的情况下格式化 Angular Material datepicker

angular - 如何在没有 moment.js 依赖的情况下格式化 Angular Material datepicker

问题描述

我想达到什么目标？

我希望我的 Angular Material(v11) 日期选择器在 Angular 版本 11 项目中使用 DD-MM-YYYY 格式。

我尝试了什么？

我尝试使用，MatMomentDateModule但这使用了 moment.js 库。这反过来将使用捆绑包中的所有语言环境，从而将捆绑包大小增加 400kb。我已添加CUSTOM_DATE_FORMATS到我的提供者中app.module.ts，如下所示：

const CUSTOM_DATE_FORMATS = {
    parse: {
        dateInput: 'DD-MM-YYYY',
    },
    display: {
        dateInput: 'DD-MM-YYYY',
        monthYearLabel: 'MMMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
    },
};

这可行，但如前所述，捆绑包大小严重增加，我不使用任何语言环境。

有没有办法在不使用 moment.js 库的情况下格式化我的日期 DD-MM-YYYY？

或者

moment.js treeshakable 是否可以让我只使用我需要的东西？

标签： angulardatepickerangular-materialmomentjs

解决方案

所以我不知道你是否使用了MatNativeDateModule你也可以实现自定义日期适配器。我认为这是特定于MatMomentDateModule.

一旦我弄清楚这一点，我就可以覆盖格式化函数并手动格式化它，如下所示：

export class CustomDateAdapter extends NativeDateAdapter {
    format(date: Date, displayFormat: any): string {
        const days = date.getDate();
        const months = date.getMonth() + 1;
        const year = date.getFullYear();
        return days + '-' + months + '-' + year;
    }
}

并像这样实现它：

@NgModule({

  providers: [
    {
      provide: DateAdapter,
      useClass: AppDateAdapter,
      deps: [MAT_DATE_LOCALE, Platform]
    },
  ]

})
export class AppModule { }

推荐阅读