Date filtering and formatting using pipe in Angular

In this article, we discuss Date filtering and formatting using pipe in Angular

Date filtering and formatting using pipe in Angular

Date filtering and formatting using pipe in Angular
Date filtering and formatting using pipe in Angular

Date filtering and formatting using pipe in Angular

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.

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.

Date filtering and formatting using pipe in Angular

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();

  }
}

Date filtering and formatting using pipe in Angular

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-08-2021)

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, August 24, 2021)

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

Date filtering and formatting using pipe in Angular

Pipe for Date format : yMMMdjms (e.g. Aug 24 , 2021, 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. August 24, 2021)

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

Date filtering and formatting using pipe in Angular

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.

Date filtering and formatting using pipe in Angular

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

Also Checkout Date filtering and formatting in Angular js

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *