Date filtering and formatting using pipe in Angular

AngularDate FilteringDate Formatting

Here I am going to discuss about date filtering/formatting using pipe and also how to use this custom pipe in component/service. There are many inbuilt pipe in Angular 2(+) for date filtering. Let us check some of them first.

1. Inbuilt date pipes.
2. Custom pipes for date filtering.
3. Use custom date filter pipe in a component.

1. Inbuilt date pipes

---

  <p>Date : {{currentDate | date }}</p>
  <p>Date : {{currentDate | date: 'MMM-dd-yyyy' }}</p>
  <p>Date : {{currentDate | date: 'MM-dd-yyyy' }}</p>
  <p>Date : {{currentDate | date: 'yMMMdjms' }}</p>
  <p>Date : {{currentDate | date: 'yMMMMEEEEd' }}</p>

So above code will do the date filtering perfectly. Then why we need a custom pipe to do this? Let’s imagine you are working on a larger application and suddenly client asked to update the date format throughout the application. Only option is to find and replace date format in entire application, which is not a good idea. But if you create a custom pipe to do this, your changes will be only at one place. Only adjusting the date format in your custom pipe will do the job.

2. Custom pipes for date filtering.

---

Let us check how we can create a custom pipe for date filtering in angular 2. I have written same using Angular js 1 as well, Date filtering and formatting in Angular js.

Pipe for date formatting (MMM-dd-yyyy)

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

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

Html

<p>Date : {{currentDate | dateFormatPipe }}</p>

I will share component code and main module code as well as for better understanding.

Component

import { Component } from '@angular/core';
import {dateFormatPipe} from './pipes'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:String;
  currentDate : any;
  constructor(){
    this.title = "Angular 2 Date filtering";
    this.currentDate = new Date().getTime();

  }
}

Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DatePipe } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {dateFormatPipe} from './pipes'

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,dateFormatPipe,
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If you are getting any error related to transform then install that as well.

$ npm install transform

If you want to update date format, go to pipe and change it. Let us check some more pipes with different date format.

Pipe for Date format : MM-dd-yyyy (e.g. 04-04-2017)

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

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

Pipe for Date format : yMMMMEEEEd (e.g. Tuesday, April 4, 2017)

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

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

Pipe for Date format : yMMMdjms (e.g. Apr 4, 2017, 4:57:45 PM)

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

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

Pipe for Date format : yMMMMd (e.g. April 4, 2017)

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

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

Pipe for Date format : jms (e.g. 4:59:09 PM)

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

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

Pipe for Date format : jm (e.g. 4:59 PM)

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

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

Similarly you can try with other date format as well.

You can append a local time zone info as well along with date format, check this link for that :- Format date using pipe and append local time zone. Also we can customize pipe for showing date in different ways, for example 2 minutes before or 2 days before. Check this link for more info: - How to show a date is today or yesterday or last week etc using pipe.

3. Use custom date filter pipe in a component

---

You can reuse the custom pipe in component or service files. Let us check below code.

Component

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentDate : any;
  newDate : any;
  constructor(){
    this.currentDate = new Date().getTime();
    let dateFormatPipeFilter = new dateFormatPipe();
    this.newDate = dateFormatPipeFilter.transform(this.currentDate);
    console.log(this.newDate);
}
}

AngularDate FilteringDate Formatting

Related Post

1. Get selected values on click and show in the UI - Angular js 2

2. Simple search using pipe in angular 2

3. How to show a date is today or yesterday or last week etc using pipe - Angular