Question

自定义的mat-datepicker存在问题。该日期以不正确的格式加载到前端，应读取为“ MM / DD / YYYY”

例如1993年4月1日如下：'29 / 19 / 93__' 数据正以ISO格式进入前端，我们要以“ MM / DD / YYYY”格式显示

该转换不适用于已加载的输入数据，但是，单击输入文本框后，日期将以正确的格式显示

在加载时使用错误的日期格式： https://imgur.com/a/XiRyMdt

我们尝试查看当dateValue创建时以及文本框中发生点击事件时发生的更改事件

HTML

<input (dateChange)="inputEvent($event, 'text')" matInput [matDatepicker]="picker"
         [value]="dateValue"
         [min]="minDate"
         [max]="maxDate"
         [style.width]="inputWidth"
         class="form-control"
         [textMask]="{mask:dateInputMask}"
         [placeholder]="placeholder">

TS

dateInputMask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];

 inputEvent(event: any, source: string) {
    // if full date entered convert to moment and set dateValue to moment

    this.dateValue = event.target.value;

    if (this.dateValue !== null && !this.dateValue.isValid()) {
      this.dateValue = null;
    }
  }

writeValue(value: any) {
    if (value === null) {
      this.dateValue = null;
      return;
    }
    if (value !== undefined) {
      this.dateValue = moment(value, this.inFormat);
      if (this.dateValue == null) {
        this.dateValue = moment(value, this.format);
      }
    }

  }

Answer 1

选择日期实现和日期格式设置

datepicker构建为与日期实现无关。这意味着可以使其与多种不同的日期实现一起使用。但是，这也意味着开发人员需要确保为datepicker提供适当的组件，以便与他们选择的实现一起使用。

...

自定义解析和显示格式

MAT_DATE_FORMATS对象只是日期选择器在分析和显示日期时使用的格式的集合。这些格式会传递给DateAdapter，因此您需要确保所使用的格式对象与应用程序中使用的DateAdapter兼容。

...

参考：Choosing a date implementation and date format settings

其他资源：

如何使用'2/9/1993'修复'29 / 19 / 93_'错误的日期

1 个答案:

选择日期实现和日期格式设置

自定义解析和显示格式