Tuesday, 4 April 2017

Date filtering and formatting using pipe in Angular 2

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.


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

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.

Custom pipe in component

How to use custom pipe in component or service files. It is so straight forward like in angular 1. 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);
}
}

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 comments :

  1. awesome post, thank you very much.

    ReplyDelete
  2. With out creating a new pipe in component, is it possible to inject and use directly.

    ReplyDelete
    Replies
    1. I have just reused custom pipe in component. Can you please elaborate the question.

      Delete