时间戳

首页 > 解决方案 > 如何更改日期选择器中的时间格式？

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

问题描述

我使用 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>

标签： angularangular-material

解决方案

你可以试试这个来格式化日期：

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

推荐阅读