Angular中使用ngModel显示日期：解决ISO格式日期显示与格式转换问题

问题核心 #

HTML5原生的<input type="date">仅接受**yyyy-MM-dd格式的字符串**或Date对象作为绑定值，你的data.date是带时区的ISO字符串（如2023-04-01T00:00:00.000Z），不符合输入框的格式要求，因此无法正常显示。另外，输入框的显示格式由浏览器/操作系统的区域设置决定，若要适配dd-mm-yyyy显示，需结合格式转换处理。

方案1：使用ngModel getter/setter（推荐，无需额外依赖） #

通过组件内的中间属性，在数据双向绑定过程中自动完成格式转换：

组件代码

export class YourComponent {
  data = { date: "2023-04-01T00:00:00.000Z" };

  // 用于绑定输入框的中间属性
  get displayDate(): string {
    if (!this.data.date) return '';
    const date = new Date(this.data.date);
    // 将ISO日期转为输入框要求的yyyy-MM-dd格式
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }

  set displayDate(value: string) {
    // 将输入框返回的yyyy-MM-dd字符串转回ISO格式，存回data.date
    this.data.date = value ? new Date(value).toISOString() : '';
  }
}

模板代码

<input type="date" [(ngModel)]="displayDate">

此方案下，输入框会根据系统区域设置自动显示对应格式（若系统区域为欧洲等使用dd-mm-yyyy的地区，即可显示为01-04-2023）。

方案2：自定义双向管道（适合多组件复用） #

创建两个自定义管道，分别处理ISO日期到输入格式的转换，以及输入格式到ISO日期的反向转换：

1. 正向管道（转输入框格式）

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'isoToDateInput' })
export class IsoToDateInputPipe implements PipeTransform {
  transform(value: string): string {
    return value ? new Date(value).toISOString().split('T')[0] : '';
  }
}

2. 反向管道（转ISO格式）

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'dateInputToIso' })
export class DateInputToIsoPipe implements PipeTransform {
  transform(value: string): string {
    return value ? new Date(value).toISOString() : '';
  }
}

3. 模板中使用

先在组件的declarations数组中注册这两个管道，然后修改模板：

<input type="date"
       [ngModel]="data.date | isoToDateInput"
       (ngModelChange)="data.date = $event | dateInputToIso">

关于强制显示dd-mm-yyyy的说明 #

原生<input type="date">的显示格式由系统区域控制，无法强制自定义。如果必须固定显示dd-mm-yyyy，建议改用type="text"输入框配合自定义日期校验/选择逻辑，或使用第三方日期组件来控制显示格式。

内容的提问来源于stack exchange，提问作者Rosy