Angular 2日期格式转换：无需添加'T'将DDMMYYYYhhmmss转为指定格式

这问题我之前开发Angular项目时也碰到过！Angular的DatePipe确实对输入格式有严格要求，它默认只认符合ISO 8601标准的日期字符串（也就是带T分隔日期和时间的格式），直接传DDMMYYYYhhmmss这种紧凑格式的话，浏览器的日期解析引擎会乱处理，导致转换结果完全不对。

不过不用手动给字符串加T，有几种优雅的解决方案：

1. 自定义一个专属解析管道（推荐，可复用） #

自定义管道是最方便的方式，把字符串解析和格式转换封装起来，整个项目都能复用：

首先创建一个新的管道文件parse-date.pipe.ts：

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

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

  transform(rawDate: string, outputFormat: string = 'dd/MM/yyyy hh:mm:ss'): string | null {
    // 先校验输入格式是否合法
    if (!rawDate || rawDate.length !== 14) {
      return '无效日期'; // 或者返回null，根据你的需求调整
    }

    // 拆分紧凑字符串的各个部分
    const day = rawDate.slice(0, 2);
    const month = rawDate.slice(2, 4);
    const year = rawDate.slice(4, 8);
    const hours = rawDate.slice(8, 10);
    const minutes = rawDate.slice(10, 12);
    const seconds = rawDate.slice(12, 14);

    // 转成ISO标准格式，交给DatePipe处理
    const isoDate = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
    return this.datePipe.transform(isoDate, outputFormat);
  }
}

然后在你的模块里声明这个管道：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ParseDatePipe } from './parse-date.pipe';

@NgModule({
  declarations: [ParseDatePipe],
  imports: [CommonModule],
  exports: [ParseDatePipe] // 导出后才能在模板里用
})
export class SharedModule {}

最后在模板里直接用：

<!-- 默认输出DD/MM/YYYY hh:mm:ss -->
{{ "01022018113025" | parseDate }}

<!-- 也可以自定义格式，比如只显示时间 -->
{{ "01022018113025" | parseDate:'hh:mm:ss' }}

2. 在组件内先处理字符串，再用DatePipe #

如果只是个别地方需要转换，不想新建管道，也可以在组件里写个方法处理：

组件类代码：

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

@Component({
  selector: 'app-date-demo',
  templateUrl: './date-demo.component.html',
  providers: [DatePipe] // 注入DatePipe
})
export class DateDemoComponent {
  constructor(private datePipe: DatePipe) {}

  formatRawDate(rawDate: string): string | null {
    if (!rawDate || rawDate.length !== 14) return null;

    const day = rawDate.slice(0, 2);
    const month = rawDate.slice(2, 4);
    const year = rawDate.slice(4, 8);
    const hours = rawDate.slice(8, 10);
    const minutes = rawDate.slice(10, 12);
    const seconds = rawDate.slice(12, 14);

    const isoDate = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
    return this.datePipe.transform(isoDate, 'dd/MM/yyyy hh:mm:ss');
  }
}

模板里调用方法：

{{ formatRawDate("01022018113025") }}

3. 直接在模板里拆分字符串（快速临时方案） #

如果只是一次性的简单需求，甚至可以直接在模板里用字符串切片拼接出想要的格式：

{{ "01022018113025".slice(0,2) }}/{{ "01022018113025".slice(2,4) }}/{{ "01022018113025".slice(4,8) }} {{ "01022018113025".slice(8,10) }}:{{ "01022018113025".slice(10,12) }}:{{ "01022018113025".slice(12,14) }}

不过这种方式代码冗余，不推荐在多个地方使用，维护起来太麻烦。

总的来说，自定义管道是最靠谱的方案，既清晰又能复用，完美解决你不想手动加T的问题~

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