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

Question

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

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

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

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

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

我希望 angular 材料对此有解决方案，但即使在他们的文档页面上，它似乎也没有格式化，并且还允许您在输入中输入字母和其他字符。

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

   <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>

Answer 1

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

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

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