Angular 5中DatePipe无法正常使用，求助日期格式化方案

看起来你的问题核心在于：虽然你认为atividade.dt_data是Date类型，但实际上它是本地化的日期字符串（比如dez 9, 2018，葡萄牙语的12月表述），而Angular的DatePipe只能识别标准格式的输入（Date对象、ISO日期字符串、时间戳），所以才会抛出InvalidPipeArgument错误。

下面给你几个可行的解决方案：

方案1：自定义管道解析本地化日期字符串 #

这种方法适合无法修改后端返回格式的场景，我们自己写一个管道把dez 9, 2018这类字符串转成合法的Date对象，再交给DatePipe处理：

1. 创建自定义管道：

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

@Pipe({ name: 'parseLocalDate' })
export class ParseLocalDatePipe implements PipeTransform {
  transform(dateStr: string): Date {
    // 映射葡萄牙语月份缩写到数字（0-11）
    const monthMap: { [key: string]: number } = {
      jan: 0, fev: 1, mar: 2, abr: 3, mai: 4, jun: 5,
      jul: 6, ago: 7, set: 8, out: 9, nov: 10, dez: 11
    };

    // 拆分字符串并提取日期部分
    const [monthStr, dayStr, yearStr] = dateStr.split(' ');
    const month = monthMap[monthStr.toLowerCase()];
    const day = parseInt(dayStr.replace(',', ''), 10);
    const year = parseInt(yearStr, 10);

    return new Date(year, month, day);
  }
}

2. 在你的模块中声明这个管道：

import { NgModule } from '@angular/core';
import { ParseLocalDatePipe } from './parse-local-date.pipe';

@NgModule({
  declarations: [ParseLocalDatePipe]
})
export class YourModule { }

3. 在模板中组合使用两个管道：

<td class="glyphicon-center-3" >{{atividade.dt_data | parseLocalDate | date: 'dd/MM'}}</td>

方案2：修改后端返回标准格式日期 #

这是更稳妥的方案，让Java后端返回Angular能直接识别的日期格式，比如ISO 8601字符串（如2018-12-09T00:00:00.000Z）。你可以在Java实体类的Date字段上添加@JsonFormat注解：

import com.fasterxml.jackson.annotation.JsonFormat;
import java.util.Date;

public class Atividade {
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'")
    private Date dt_data;

    // getter和setter
}

这样后端返回的日期会是标准格式，Angular会自动将其解析为Date对象，你直接用DatePipe就可以正常格式化了：

<td class="glyphicon-center-3" >{{atividade.dt_data | date: 'dd/MM'}}</td>

方案3：直接在模板中尝试转换（不推荐） #

你也可以直接在模板中用Date构造函数转换，但这种方法兼容性差（不同浏览器对本地化日期字符串的解析能力不同），仅做参考：

<td class="glyphicon-center-3" >{{new Date(atividade.dt_data) | date: 'dd/MM'}}</td>

为什么会报错？ #

Angular的DatePipe对输入格式有严格要求：

• 必须是Date对象
• 或者ISO 8601标准格式的字符串（如2018-12-09、2018-12-09T12:00:00）
• 或者数字类型的时间戳

而你的atividade.dt_data是类似dez 9, 2018的本地化字符串，不在上述合法输入范围内，所以管道无法处理并抛出错误。

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