typescript 如何更改角度材料日期选择器格式

How to change angular material datepicker format

提问by mmodalities

This is the format of date I am getting when I am using angular material datepicker....Wed Nov 21 2018 00:00:00 GMT+0530 (India Standard Time)

这是我使用角材料日期选择器时得到的日期格式....Wed Nov 21 2018 00:00:00 GMT+0530 (India Standard Time)

But I need date in (YYYY-MM-DD)or (YYYY-MM-DDTHH:mm)this format.

但我需要日期(YYYY-MM-DD)或(YYYY-MM-DDTHH:mm)这种格式。

this is model class I am using to capture data from angular material form

这是我用来从角材料形式捕获数据的模型类

export class FlightSchedule {

    constructor(
        public destination: string,
        public origin: string,
        public date: string,
        public limit: string
    ) {}

}

Please help me, I am unable to convert date in YYYY-MM-DDor YYYY-MM-DDTHH:mmformat.

请帮助我，我无法转换日期YYYY-MM-DD或YYYY-MM-DDTHH:mm格式。

I am new to Angular

我是 Angular 的新手

Thanks in advance

提前致谢

回答by user184994

You need to provide an object containing the formats you wish to use. The object should look something like:

您需要提供一个包含您希望使用的格式的对象。该对象应如下所示：

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

You then need to add that in to your providers array, like so:

然后，您需要将其添加到您的 providers 数组中，如下所示：

  import { MAT_DATE_FORMATS } from '@angular/material';
  import { MomentDateAdapter } from '@angular/material-moment-adapter';

  //...

  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],

Here is a StackBlitz demo to show it working

这是一个 StackBlitz 演示来展示它的工作

回答by MSM

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';
import { MomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';

 export const DateFormats = {
            parse: {
                dateInput: ['YYYY-MM-DD']
            },
            display: {
                dateInput: 'YYYY-MM-DD',
                monthYearLabel: 'MMM YYYY',
                dateA11yLabel: 'LL',
                monthYearA11yLabel: 'MMMM YYYY',
            },
        };

    providers: [

        { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
          { provide: MAT_DATE_FORMATS, useValue: DateFormats }

      ],

add above code in your app.module. it is working perfectly for me.

在你的 app.module 中添加上面的代码。它非常适合我。

回答by NatoBoram

No need to use MomentDateAdapter!

没必要用MomentDateAdapter！

Here's my solution with the least amount of code andusing the MAT_NATIVE_DATE_FORMATS.

这是我使用最少代码并使用MAT_NATIVE_DATE_FORMATS.

1. Declare your own date formats

1. 声明你自己的日期格式

import { MatDateFormats, MAT_NATIVE_DATE_FORMATS } from '@angular/material';

export const GRI_DATE_FORMATS: MatDateFormats = {
  ...MAT_NATIVE_DATE_FORMATS,
  display: {
    ...MAT_NATIVE_DATE_FORMATS.display,
    dateInput: {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    } as Intl.DateTimeFormatOptions,
  }
};

1. Use them

2. 使用它们

@Component({
  selector: 'app-vacation-wizard',
  templateUrl: './vacation-wizard.component.html',
  styleUrls: ['./vacation-wizard.component.scss'],
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: GRI_DATE_FORMATS },
  ]
})

Don't forget to set the appropriate language!

不要忘记设置合适的语言！

this.adapter.setLocale(this.translate.currentLang);

That's all!

就这样！