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

Question

当用户在输入中输入数字日期(如03151989(时，我希望在输入时自动格式化为1989年3月15日。

我一辈子都想不出该怎么做。我试过一个正则表达式，但如果你一次键入多个数字，它就会破坏它

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

指定的值"1989年3月15日"；不符合要求的格式；yyyy-MM-dd"；。

有人知道如何修复此错误或如何更正我遇到的问题吗？

我希望有棱角的材料能有一个解决方案，但即使在他们的文档页面上，它似乎也没有格式化，还可以让你在输入中键入字母和其他字符。

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

<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，将类型改回文本，然后使用普通javascript来针对输入，在键入时应用所需的格式，并仅限于数字。

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

看看这个代码笔，我认为它达到了你想要的格式：https://codepen.io/tutsplus/pen/KMWqRr