Angular Custom Pipe Error for Date as a string

Question

I have a date in string format in firebase collection, and I am trying to display it. As far as I understand, pipe filters doesn't work for strings, and only for Date objects. To do this, I need to use custom pipe.

I used the below function:

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

and one with moment:

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

 }

The first one is giving below error:

and the second is giving invalid date.

Below is the data in the collection:

Below is the pipe file:

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;
}
}

And below is the 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 is working fine, as it is a date object, while, fromDate, and endDate are not working.

Any suggestions?

Thanks in advance

Akber Iqbal · Accepted Answer · 2019-06-28 13:11:51Z

1

The format of the date in endDate and fromDate wouldn't work with DatePipe; So, you need to convert this particular format to a date before you can use DatePipe;

relevant 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;
    }
  }
}

relevant 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>

relevant 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"}'}
    ]

complete working stackblitz here

answered Jun 28, 2019 at 13:11

Akber Iqbal

15.1k12 gold badges54 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AbdalRahman Farag Over a year ago

many thanks for your support. I believe the issue, is that I needed to first parse the date to an object, then use moment. below is working fine: transform(value) { let d = JSON.parse(value); return moment(d).format('DD-MM-YYYY'); }

Collectives™ on Stack Overflow

Angular Custom Pipe Error for Date as a string

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related