TypeScript - איך לשנות את פורמט התאריך ב-Angular Material Datepicker

זהו הפורמט של התאריך שאני מקבל כשאני משתמש בבורר התאריכים של Angular Material....Wed Nov 21 2018 00:00:00 GMT+0530 (India Standard Time)

אבל אני צריך תאריך בפורמט (YYYY-MM-DD) או (YYYY-MM-DDTHH:mm) הזה.

זו מחלקת מודל שאני משתמש בה כדי ללכוד נתונים מטופס Angular Material

export class FlightSchedule {

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

}

בבקשה עזרו לי, אני לא מצליח להמיר תאריך בפורמט YYYY-MM-DD או YYYY-MM-DDTHH:mm.

אני חדש ב-Angular

תודה מראש

תשובה #1

אתה צריך לספק אובייקט שמכיל את הפורמטים שבהם אתה רוצה להשתמש. האובייקט צריך להיראות משהו כזה:

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

לאחר מכן עליך להוסיף זאת למערך הספקים שלך, כך:

  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 כדי להראות איך זה עובד

תשובה #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);

זה הכל!

תשובה #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 שלך. זה עובד מצוין בשבילי.