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

Question

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

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

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

export class FlightSchedule {

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

}

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

我是 Angular 的新手

提前致谢

Answer 1

您需要提供一个包含您希望使用的格式的对象。 该对象应类似于：

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

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

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

  //...

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

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

Answer 2

无需使用MomentDateAdapter ！

这是我使用最少代码并使用MAT_NATIVE_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,
  }
};

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 },
  ]
})

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

constructor(private readonly adapter: DateAdapter<Date>) {}
this.adapter.setLocale(this.translate.currentLang);

就这样！

Answer 3

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 }

      ],

在你的 app.module 中添加上面的代码。 它对我来说非常有用。

Answer 4

一种快捷方式是创建 javascript 日期对象，然后将其格式化为您想要的任何格式。 假设您的日期输入中有 [(ngModel)]="myDate" ，您可以执行以下操作：

var formatedDate = new Date(this.myDate).toLocaleString();

这是做你想做的事的捷径：）

Answer 5

 modelChanged(date) { var theDate = new Date(Date.parse(date)); const localDate = theDate.toLocaleString().split(" "); console.log(localDate); }

 <!--I had the same issue and found it that with javascript was simple approach ---> <mat-form-field class="example-full-width" appearance="fill"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker" [(ngModel)]="date" (ngModelChange)="modelChanged($event)" /> <mat-datepicker-toggle matSuffix [for]="picker" ></mat-datepicker-toggle> <mat-datepicker touchUi #picker color="primary"></mat-datepicker> </mat-form-field>