Angular DatePipe转换异常：nl-nl locale下部分日期无法转换

问题原因 #

你的猜测完全正确：当传入dd-MM-YYYY格式的字符串时，Angular的DatePipe底层依赖浏览器的Date.parse()方法解析日期，而nl-nl locale环境下，浏览器会错误地将字符串按MM-dd-YYYY格式解析：

• 对于02-09-2023，02作为月份合法（对应2月），所以能解析成功，但实际解析结果是2023年2月9日，并非你期望的9月2日；
• 对于16-02-2023，16作为月份不存在，直接抛出Unable to convert...异常。

解决方案 #

核心思路是先将字符串按指定格式手动解析为合法的Date对象，再交给DatePipe处理，避免依赖浏览器不可靠的自动解析行为。

方案1：针对固定dd-MM-YYYY格式的解析

修改自定义管道代码，手动拆分日期字符串并构造Date对象：

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { ConfigurationService } from '../services/configuration.service';

@Pipe({
    name: 'formattedDate',
})
export class FormattedDatePipe implements PipeTransform {
    constructor(
        private datePipe: DatePipe,
        private configurationService: ConfigurationService,
    ) {}

    transform(value: Date | string | number): string {
        let dateValue: Date | null = null;

        if (typeof value === 'string') {
            // 拆分dd-MM-YYYY格式的字符串
            const [day, month, year] = value.split('-').map(Number);
            // 注意：JavaScript Date的月份是0-based，需减1
            dateValue = new Date(year, month - 1, day);
        } else {
            dateValue = value instanceof Date ? value : new Date(value);
        }

        // 验证日期有效性
        if (!dateValue || isNaN(dateValue.getTime())) {
            return ''; // 可替换为自定义默认文本
        }

        return this.datePipe.transform(dateValue, this.configurationService.config.customer.dateFormat) || '';
    }
}

方案2：适配配置中的动态日期格式

如果你的日期格式是通过配置动态获取的，可实现一个通用解析方法适配不同格式：

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { ConfigurationService } from '../services/configuration.service';

@Pipe({
    name: 'formattedDate',
})
export class FormattedDatePipe implements PipeTransform {
    constructor(
        private datePipe: DatePipe,
        private configurationService: ConfigurationService,
    ) {}

    transform(value: Date | string | number): string {
        const dateFormat = this.configurationService.config.customer.dateFormat;
        let dateValue: Date | null = null;

        if (typeof value === 'string') {
            dateValue = this.parseDateByFormat(value, dateFormat);
        } else {
            dateValue = value instanceof Date ? value : new Date(value);
        }

        if (!dateValue || isNaN(dateValue.getTime())) {
            return '';
        }

        return this.datePipe.transform(dateValue, dateFormat) || '';
    }

    /**
     * 根据指定格式解析日期字符串
     * 支持格式：DD-MM-YYYY、YYYY-MM-DD等（以'-'分隔的格式）
     */
    private parseDateByFormat(dateStr: string, format: string): Date | null {
        const formatSegments = format.split('-');
        const dateSegments = dateStr.split('-').map(Number);
        
        if (formatSegments.length !== dateSegments.length) return null;

        let year = 0, month = 0, day = 0;
        formatSegments.forEach((seg, index) => {
            switch (seg.toUpperCase()) {
                case 'DD':
                    day = dateSegments[index];
                    break;
                case 'MM':
                    month = dateSegments[index] - 1; // 转换为0-based月份
                    break;
                case 'YYYY':
                    year = dateSegments[index];
                    break;
            }
        });

        const parsedDate = new Date(year, month, day);
        // 验证日期合法性（避免2月30日等无效日期）
        return parsedDate.getFullYear() === year && 
               parsedDate.getMonth() === month && 
               parsedDate.getDate() === day ? parsedDate : null;
    }
}

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