我如何创建 Angular 自定义日期管道

Question

I'm working on angular 5 I want to create a custom date pipe that allows me to subtract some days from a date :

This how I display my date value :

 <span>{{data.nextCertificateUpdate | date:'yyyy-MM-dd'}}</span>  

for example this display a value like : 2018-08-29

I ask if it's possible to create a pipe that allow me to substract a number of days for example 28 from this date ?

Something like :

<span>{{data.nextCertificateUpdate | mypipe:28 }}</span>  

and this should display value like : 2018-08-01

Thanks for any help

Answer 1

Adding to the nice answer given by Sachila above, you can also implement the full functionality in your custom pipe itself.

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

@Pipe({ name: 'mypipe' })
export class Mypipe implements PipeTransform {
  // adding a default format in case you don't want to pass the format
  // then 'yyyy-MM-dd' will be used
  transform(date: Date | string, day: number, format: string = 'yyyy-MM-dd'): string {
    date = new Date(date);  // if orginal type was a string
    date.setDate(date.getDate()-day);
    return new DatePipe('en-US').transform(date, format);
  }
}

And use your custom Pipe like:

<span>{{data.nextCertificateUpdate | mypipe: 28: 'yyyy-MM-dd'}}</span>

See a working example here: https://stackblitz.com/edit/angular-995mgb?file=src%2Fapp%2Fapp.component.html

Answer 2

You can create class for property like wise I have use environment class for date format DATE_FORMAT and assign by default dd-MM-yyyy format and use in date pipe. By this approach only change the value of DATE_FORMAT and we can easily change the format of date else where.

import { Pipe, PipeTransform } from '@angular/core';
import { environment } from "../../../../environments/environment";
import { DatePipe } from "@angular/common";

@Pipe({
  name: 'dateFormat'
})


export class DateFormatPipe extends DatePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(Object.keys(environment).indexOf("DATE_FORMAT") >= 0){
      return super.transform(value, environment.DATE_FORMAT);
    }

    return super.transform(value, 'dd-MM-yyyy');
}

html

<span>{{ data.date | dateFormat }}</span>

Answer 3

Create a custom pipe call mypipe

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

@Pipe({ name: 'mypipe' })
export class Mypipe implements PipeTransform {
  transform(date: Date, day: number): string {
    date.setDate(d.getDate()-day);
    return date;
  }
}

call it like this

<span>{{data.nextCertificateUpdate | mypipe:28 | date:'yyyy-MM-dd'}}</span>