javascript - 如何更改模板中的日期类型？ Angular 2+

问候

如何更改模板中的格式。我使用日期选择器。

我想显示格式示例：12/15/2019

他如何显示给我的当前状态示例：2019年12月30日星期一12:10:40 GMT + 0100（中欧标准时间）

查看我的代码以获取日期：

startDate: Date;

  ngOnInit() {
    this.startDate = new Date();
    this.startDate.setDate(this.startDate.getDate() + 1);
}

template:

              <mat-form-field appearance="outline" class="example-full-width">
                  <input  [matDatepicker]="date" [(ngModel)]="startDate" name="startDate"  matInput   placeholder="Izaberite datum isporuke"   >
                  <mat-datepicker-toggle matSuffix [for]="date" ></mat-datepicker-toggle>
                  <mat-datepicker touchUi #date></mat-datepicker>
                </mat-form-field>

 <p> Order for {{ startDate }} </p>

最佳答案

最简单的方法就是这样做：

this.startDate.setDate(this.startDate.getDate() + 1);
this.startDate = this.startDate.toLocaleDateString();

这会将格式转换为您要的格式。
但是您也可以使用其他各种选项，例如使用Moment.js或添加执行日期格式化的管道，并在输出日期时在模板中调用它：

<p>order for {{ startDate || formatDate }}</p>

管道是处理此类事务的一种好方法，如果您需要做很多事情或者其格式更加复杂并且想要在一个地方处理所有事情，则是一种不错的方法。

编辑：

我忘记了它被用作日期选择器的变量，因此要使其保持为日期类型，就不能在组件中使用toLocaleDateString。

以HTML格式输出为

<p>order for {{ startDate.toLocaleDateString() }}</p>

在那里，组件中的Date对象仍然是正确的类型。这是为什么管道有用的一个很好的例子:)