时间戳

首页 > 解决方案 > Angular matDatepicker 禁用日期转换

angular - Angular matDatepicker 禁用日期转换

问题描述

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

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

但是当我尝试用模糊捕捉它时，matDatePicker 尝试将它转换为新的 Date(inputvalue) 所以我捕捉到 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>

标签： angulartypescriptangular-material

解决方案

您可能需要创建一个 custom DateAdapter，它负责解析和格式化材料组件中的日期。

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

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

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

推荐阅读