Angular2+中转换15.02.2018为Date对象报Invalid Date，如何修改默认日期格式？

嗨，我来帮你搞定Angular 2+里这个日期格式的问题！你遇到的Invalid Date错误，本质是JavaScript原生的Date构造函数默认不认识DD.MM.YYYY这种日在前、月在中的格式，下面给你几个实用的解决方案：

这是最直接的方式，先把字符串转成JavaScript能识别的格式，再用Angular的DatePipe处理输出：

• 首先在组件里注入DatePipe：

import { DatePipe } from '@angular/common';

constructor(private datePipe: DatePipe) {}

• 写一个解析方法，把DD.MM.YYYY转成Date对象：

parseDDMMYYYYToDate(dateStr: string): Date | null {
  const [day, month, year] = dateStr.split('.');
  // 注意月份要减1，因为JavaScript的月份是0-11
  const date = new Date(+year, +month - 1, +day);
  return isNaN(date.getTime()) ? null : date;
}

• 如果需要把Date对象再转回DD.MM.YYYY格式，直接用DatePipe：

const formattedDate = this.datePipe.transform(new Date(), 'dd.MM.yyyy');

如果项目里多处需要处理这种日期格式，自定义管道会更高效：

1. 先生成管道文件：

ng generate pipe customDate

2. 实现管道的解析和格式化逻辑：

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

@Pipe({
  name: 'customDate'
})
export class CustomDatePipe implements PipeTransform {
  constructor(private datePipe: DatePipe) {}

  transform(value: string | Date, targetFormat: string = 'dd.MM.yyyy'): string | null {
    let dateObj: Date | null = null;

    if (typeof value === 'string') {
      // 解析DD.MM.YYYY字符串为Date对象
      const [day, month, year] = value.split('.');
      dateObj = new Date(+year, +month - 1, +day);
      if (isNaN(dateObj.getTime())) return '无效日期';
    } else if (value instanceof Date) {
      dateObj = value;
    }

    // 格式化为目标格式
    return this.datePipe.transform(dateObj, targetFormat);
  }
}

3. 在模板里直接用：

<!-- 把字符串转成格式化后的日期 -->
<p>{{ '15.02.2018' | customDate }}</p>
<!-- 把Date对象转成DD.MM.YYYY格式 -->
<p>{{ myDate | customDate }}</p>

如果是用户在表单里输入的日期，你可以在控件值变化时自动解析：

import { FormControl } from '@angular/forms';

// 初始化表单控件
dateInput = new FormControl('');

ngOnInit() {
  this.dateInput.valueChanges.subscribe(inputValue => {
    if (inputValue) {
      const parsedDate = this.parseDDMMYYYYToDate(inputValue); // 用方案1的解析方法
      if (parsedDate) {
        console.log('解析后的有效日期：', parsedDate);
        // 这里可以把解析后的日期存到组件变量里，或者做其他处理
      } else {
        console.error('请输入正确的DD.MM.YYYY格式日期');
      }
    }
  });
}

如果你的项目已经引入了moment.js或者date-fns这类日期库，处理起来会更简单：

• 用moment的话：const date = moment('15.02.2018', 'DD.MM.YYYY').toDate();
• 用date-fns的话：const date = parse('15.02.2018', 'dd.MM.yyyy', new Date());

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