Как изменить формат времени в DatePicker?

Question

Я использую Angular Material и его компонент Datepicker.И у меня проблема, когда я делаю отчет.Все даты отображаются таким образом.

Пт 25 января 2019 00:00:00 GMT 0500 (Екатеринбург, стандартное время)

И мне нужны даты вотчет должен быть в этом формате 25.01.2019

Я пытался не использовать компонент datepicker, и все даты отображаются нормально, но я не хочу работать без этого компонента.

Как это можно исправить?

ts:

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Report } from "../../../../shared/interfaces";

import * as _moment from 'moment';
const moment = _moment;

@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.scss']
})

export class ReportComponent {

  selectedReport: Report
  report_url: string = 'http://localhost:3000' + '/reports/svod'
  selectedDate: string = moment().format('YYYY-MM-DD')

  constructor(
    public dialogRef: MatDialogRef<ReportComponent>,
    @Inject(MAT_DIALOG_DATA)
    public data: any
  ) { 
    this.selectedReport = new Report()
  }

  onSelectDate(event): void {
    this.selectedReport = new Report()
    this.selectedDate = event
  }

}

html:

<mat-form-field>
  <input matInput [ngModel]="selectedDate" [matDatepicker]="dp" (ngModelChange)="onSelectDate($event)" >
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

Answer 1

Как указано в документах , вам необходимо предоставить alocale для работы с лучшим форматом.Так что для вас это должно быть примерно так:

---

@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.scss'],
  providers: [
    { provide: DateAdapter, useClass: MyDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMAT },
    { provide: MAT_DATE_LOCALE, useValue: "**YOUR LOCALE**" }
  ]
})

---

export const CUSTOM_DATE_FORMAT: MatDateFormats = {
  parse: {
    dateInput: 'DD.MM.YYYY',
  },
  display: {
    dateInput: 'DD.MM.YYYY',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'DD.MM.YYYY',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

---

Answer 2

Вы можете попробовать это отформатировать дату:

  onSelectDate(event): void {
    this.selectedReport = new Report()
    this.selectedDate = formatDate(event, 'dd/MM/yyyy', 'en-US') // Try to convert here
  }