日期的角度自定义管道错误作为字符串

Question

我在 firebase 集合中有一个字符串格式的日期，我正在尝试显示它。据我了解，管道过滤器不适用于字符串，仅适用于 Date 对象。为此，我需要使用自定义管道。

我使用了以下函数：

transform(value: string) {
    var datePipe = new DatePipe("en-US");
     value = datePipe.transform(value, 'MM-dd-yyyy');
     return value;
}

还有一个时刻：

transform(value: string) {
    let d = new Date (value);
    return moment(d).format('DD-MM-YYYY');

 }

第一个给出以下错误：

第二个是给出无效的日期。

以下是集合中的数据：

下面是管道文件：

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

@Pipe({
    name: 'dateFormatPipe'
  })
export class formatDate implements PipeTransform {
  transform(value: string) {
    var datePipe = new DatePipe("en-US");
     value = datePipe.transform(value, 'MM-dd-yyyy');
     return value;
}
}

下面是html：

  <tr *ngFor="let v of list">
                <td>{{v?.NoOfDays}}</td>
                <td>{{v?.vacationType|json}}</td>
                <td>{{v?.SubmissionDate.toDate()|date}}</td>
                <td>{{v?.fromDate| dateFormatPipe  }}</td>
                <td>{{v?.endDate | dateFormatPipe }}</td>

              </tr>

P.S. SubmissionDate 工作正常，因为它是一个日期对象，而 fromDate 和 endDate 不起作用。

有什么建议吗？

提前致谢

Answer 1

endDate 和 fromDate 中的日期格式不适用于 DatePipe；因此，您需要先将此特定格式转换为日期，然后才能使用 DatePipe；

相关pipe.ts：

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

@Pipe({
  name: 'dateFormatPipe'
})
export class FilterPipe implements PipeTransform {
  transform(value: string) {
    var datePipe = new DatePipe("en-US");
    try{
     value = datePipe.transform(value, 'MM-dd-yyyy');
     return value;
    }
    catch(exp){
      let myVar = JSON.parse(value);
      let myDate = new Date(myVar.year, myVar.month, myVar.day)
      value = datePipe.transform(myDate, 'MM-dd-yyyy');
      return value;
    }
  }
}

相关html：

  <tr *ngFor="let v of list">
    <td>{{v?.NoOfDays}}</td> 
    <td>{{v?.vacationType|json}}</td>
    <td>{{v?.SubmissionDate|date}}</td>
    <td>{{v?.fromDate| dateFormatPipe  }}</td>
    <td>{{v?.endDate | dateFormatPipe }}</td>
  </tr>

相关TS：

this.list=[
      {NoOfDays: 4, vacationType:'official', SubmissionDate: '06/20/2019',
      fromDate: '{"year":"2019","month":"6","day":"24"}', endDate: `{"year":"2019","month":"6","day":"27"}`},
      {NoOfDays: 2, vacationType:'sick', SubmissionDate: '06/28/2019',
      fromDate: '{"year":"2019","month":"7","day":"2"}', endDate: '{"year":"2019","month":"7","day":"3"}'}
    ]

完成working stackblitz here