如何在没有 moment.js 依赖项的情况下格式化 Angular Material 日期选择器

Question

我想达到什么目的？

我希望我的 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 是否可以让我只使用我需要的东西？

Answer 1

所以我不知道您是否使用 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 { }

Answer 2

我自己今天也遇到了同样的问题，不想使用 moment.js。似乎如果您只想要标准日期格式（例如非美国），一个简单的解决方案是添加到您的 app.module.ts:

import { MAT_DATE_LOCALE } from '@angular/material/core';
@NgModule({
...
  providers: [{provide: MAT_DATE_LOCALE, useValue: 'en-GB'}],
...

毫无疑问，其他国家代码也可以。这种方法大概会改变您应用程序中的所有日期外观（不仅仅是您的日期选择器），但在我的情况下，这是完全可以接受的。组件和 HTML 模板都不需要进一步更改。

Answer 3

在这里找到了这个解决方案，它按预期工作https://www.angularjswiki.com/material/datepicker/#mat-datepicker-date-format

import { NativeDateAdapter, DateAdapter,MAT_DATE_FORMATS } from '@angular/material';
import { formatDate } from '@angular/common';

export const PICK_FORMATS = {
  parse: {dateInput: {month: 'short', year: 'numeric', day: 'numeric'}},
  display: {
      dateInput: 'input',
      monthYearLabel: {year: 'numeric', month: 'short'},
      dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
      monthYearA11yLabel: {year: 'numeric', month: 'long'}
  }
};

class PickDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
      if (displayFormat === 'input') {
          return formatDate(date,'dd-MMM-yyyy',this.locale);;
      } else {
          return date.toDateString();
      }
  }
}

然后只需在您的模块或组件提供程序中使用它

providers: [
    {provide: DateAdapter, useClass: PickDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS}
]

如何在没有 moment.js 依赖项的情况下格式化 Angular Material 日期选择器

How can I format the Angular Material datepicker without moment.js dependency

datepicker

momentjs

angular-material

angular