如何更改模板中的日期类型？角度 2+答案

【问题标题】：How to change date type in template? Angular 2+如何更改模板中的日期类型？角度 2+
【发布时间】：2020-04-18 18:16:03
【问题描述】：

问候。

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

我想显示格式示例：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>

【问题讨论】：

标签： javascript angular angular-material

【解决方案1】：

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

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

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

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

如果您经常使用管道或者格式更复杂并且您希望在一个地方处理所有这些事情，那么管道是一种很好、干净的方式来处理这种事情。

编辑：

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

在 HTML 中输出为

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

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

【讨论】：

这是可行的，但 [ts] 类型“字符串”不可分配给类型“日期”。当我开始为生产构建时，我会遇到错误，我无法构建应用程序
另一件重要的事情。当您执行第一个示例时，您将如何在我设置的输入类型中写入我丢失的日期。