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

Question

问候。

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

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

他向我显示的当前状态示例:2019 年 12 月 30 日星期一 22: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>

Answer 1

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

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 对象仍然是正确的类型。这是管道为何有用的一个很好的例子:)