如何将 <mat-datepicker> 中的日期自定义为 2017-11-20T11:23:00 - Angular 材料 5答案

【问题标题】：How to customize date in <mat-datepicker> to 2017-11-20T11:23:00 - Angular material 5如何将 <mat-datepicker> 中的日期自定义为 2017-11-20T11:23:00 - Angular 材料 5
【发布时间】：2018-01-23 07:11:52
【问题描述】：

我正在使用以下代码来显示日期选择器

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

但返回结果为 2018 年 1 月 24 日星期三 00:00:00 GMT+0530（印度标准时间）但我需要它作为 2018-01-24T11:23:00。 你能帮帮我吗？

谢谢。

【问题讨论】：

标签： angular datepicker angular-material

【解决方案1】：

在您的 component.html 中，使用两个输入，第一个用于保存来自 mat-datepicker 的日期，第二个用于与模型绑定。在“mat-datepicker”的（selectedChanged）事件中，从日期选择器值更新“myModel.MyDateString”：

<mat-form-field>
    <input type="hidden" [matDatepicker]="myDate">
    <input  matInput  placeholder="My date" [(ngModel)]="myModel.MyDateString">
    <mat-datepicker-toggle matSuffix [for]="myDate"></mat-datepicker-toggle>
    <mat-datepicker #myDate  (selectedChanged)="updateDateToString($event)"></mat-datepicker>
  </mat-form-field>

在您的 component.ts 中：

updateDateToString(event) {
let newDate = new Date(event)

let dd: number | string = newDate.getDate();
if (dd < 10) {
  dd = '0' + dd;
}
let mm: number | string = newDate.getMonth() + 1;
if (mm < 10) {
  mm = '0' + mm;
}
const yy: number = newDate.getFullYear();
this.myModel.MyDateString = `${yy}-${mm}-${dd}`;

}

【讨论】：

【解决方案2】：

将值转换为 JSON。 toString 输出转换为“2018 年 1 月 24 日星期三 00:00:00 GMT+0530”格式。当您将其转换为 JSON 时，其格式为 2018-01-24T11:23:00.000Z

【讨论】：