Angular matDatepicker 禁用日期转换

Question

我想为 MatDatepicker 创建一个简单的 DateFormatterDirective，等等：当我在日历中写入简单的 4 或 6 个数字时，指令将其替换为实际日期

0123 -> 2021-01-23 200415 -> 2020-04-15

但是当我尝试用模糊捕捉它时，matDatePicker 尝试将它转换为新日期（输入值）所以我抓住了 0123 - (123-01-01) 那么我可以禁用 datepicker 的这个功能或者有任何其他想法来实现这个功能吗？

<mat-form-field appearance="fill" class="example-form-field">
  <mat-label>Choose a date</mat-label>
  <input simpleDateFormatterDirective matInput [matDatepicker]="datepicker">
  <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
  <mat-datepicker #datepicker>
    <mat-datepicker-actions>
      <button mat-button matDatepickerCancel>Cancel</button>
      <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
    </mat-datepicker-actions>
  </mat-datepicker>
</mat-form-field>

Answer 1

您可能需要创建自定义 DateAdapter，它负责解析和格式化 material 组件中的日期。

然后您需要在应用程序的某个级别提供该适配器 - 无论是根目录还是在组件内部。

您可以扩展标准 NatvieDateAdapter 并使用您的自定义逻辑覆盖您需要的方法。

您可能还需要为您的用例提供 MAT_DATE_FORMATS - 除非您在适配器中对它们进行硬编码。

Angular matDatepicker 禁用日期转换

Angular matDatepicker disable date casting

typescript

angular-material

angular