Question

我使用Angular Material及其Datepicker组件。我报告时遇到问题。所有日期都以这种方式显示。

2019年1月25日星期五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

您可以尝试使用此格式设置日期：

  addUser(uid: string, data: User) {
    this.usersCollection.doc(uid).set(data);
  }

Answer 2

如docs中的建议，您需要提供一个语言环境以使用最佳格式。所以对您来说，应该是这样的：

@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',
  },
};

如何更改日期选择器中的时间格式？

2 个答案: