CODEWITHSUNDEEP
angulartypescriptangular-materialangular7angular-pipe
AbdalRahman Farag
AbdalRahman Farag

Reputation: 217

Angular Custom Pipe Error for Date as a string

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

enter image description here

enter image description here

Upvotes: 1

Views: 4405

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

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

Upvotes: 1

Related Questions