如何在 mat-datepicker 输入中格式化用户输入的输入？答案

【问题标题】：How to format user typed input in mat-datepicker input?如何在 mat-datepicker 输入中格式化用户输入的输入？
【发布时间】：2020-08-08 07:10:01
【问题描述】：

当用户在输入中输入数字日期（例如 03151989）时，我希望它在输入时自动格式化为 03/15/1989。

我终其一生都无法弄清楚如何做到这一点。我试过一个正则表达式，但如果你一次输入多个数字，它会破坏它。

我尝试将输入类型更改为日期，但这会导致 mat-datepicker 出现问题，并且出现错误：

指定的值“3/15/1989”不符合要求的格式，“yyyy-MM-dd”。

有谁知道如何修复此错误或如何纠正我遇到的问题？

我希望 angular material 能解决这个问题，但即使在他们的文档页面上，它似乎也没有格式化，并且还允许您在输入中输入字母和其他字符。

这是我正在使用的代码示例：

   <mat-form-field class="form-element span-1-2">
    <mat-label>Test *</mat-label>
    <input
      matInput
      [matDatepicker]="datePicker"
      formControlName="test"
      type="date"
    />
    <mat-datepicker-toggle
      matSuffix
      [for]="datePicker"
    ></mat-datepicker-toggle>
    <mat-datepicker #datePicker></mat-datepicker>
  </mat-form-field>

【问题讨论】：

标签： javascript html angular angular-material

【解决方案1】：

您可以为输入分配一个 ID，将类型改回文本，然后使用 vanilla javascript 来定位输入，在您输入时应用所需的格式，并仅限于数字。

    <input id="dateInput" matInput [matDatepicker]="datePicker" formControlName="test" 
type="text" />

看看这个codepen，我认为它实现了你正在寻找的格式：https://codepen.io/tutsplus/pen/KMWqRr

【讨论】：