Declare Date/DateTime pipes globally to use in application wide

In my previous articles, I have written how to create custom date/datetime formatting pipes use in your application. As a practice, I think it will be good if you can include similar pipes like these into a module where you can use in the application rather importing all the pipes separately into the app.module.ts.

• How to format DateTime with a Custom DateTime Pipe in Angular 2 +
• How to format Dates with a Custom Date Pipe in Angular 2 +

Rather than using these two pipes separately, let's create a module and declare and export in a global level. So that it can be used in throughout the application. I'm going to use exactly same code which I wrote in above two articles.

Step 01: Create an Angular App

  $ ng new demoPipeApp

Step 02: Navigate to your dateFormatApp

  $ cd demoPipeApp

Step 03: Create a file to store format options

constants.ts

export class Constants {
    public static readonly dateFormat: string = "dd-MM-yyyy";
    public static readonly dateTimeFormat: string = `${Constants.dateFormat} HH:mm`;
}

Step 04: Create a Module to register all the pipes using Angular CLI

  $ ng g module DateTimeFormatPipes


  // this will creatte date-format-pipes.module.ts

Step 05: Create "DateTimeFormat" Pipe using Angular CLI

  $ ng g pipe DateTimeFormat

date-time-format.pipe.ts

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

@Pipe({
  name: 'dateTimeFormat'
})
export class DateTimeFormatPipe extends DatePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return super.transform(value, this.dateTimeFormat);
  }
}

Step 06: Create "DateFormat" Pipe using Angular CLI

  $ ng g pipe DateFormat

date-format.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
import { Constants } from '../modals/constants';

@Pipe({
  name: 'dateFormat'
})
export class DateFormatPipe extends DatePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return super.transform(value, Constants.dateFormat);
  }
}

Step 07: Declare and Export both pipes in "date-format-pipes.module.ts"

date-format.pipe.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DateFormatPipe } from './date-format.pipe';
import { DateTimeFormatPipe } from './date-time-format.pipe';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [DateFormatPipe, DateTimeFormatPipe],
  exports: [DateFormatPipe, DateTimeFormatPipe]
})
export class DateFormatPipesModule { }

Step 08: Import "DateFormatPipesModule" to "app.module.ts" 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DateFormatPipesModule } from './date-format-pipes/date-format-pipes.module';

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

Step 09: Modify the "app.component.html"

Date: {{date | dateFormat}}
DateTime: {{date | dateTimeFormat}}

Output

Format DateTime with a Custom DateTime Pipe in Angular 2 +

I have explained creating a custom date formatting in angular 2 using pipes in my previous article. In this article, I'm going to create an application with custom DateTime Pipe which can configure the format from one place that will affect to the entire application without find and replace the hard-coded angular default formatting options.

Step 01: Create an Angular App

  $ ng new dateTimeFormatApp

Step 02: Navigate to your dateFormatApp

  $ cd dateTimeFormatApp

Step 03: Create a Pipe using Angular CLI

  $ ng g pipe DateTimeFormat

date-time-format.pipe.ts looks like this:

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

@Pipe({
  name: 'dateTimeFormat'
})
export class DateFormatPipe extends DatePipe implements PipeTransform {

  private readonly dateTimeFormat = "dd-MM-yyyy HH:mm"; // feel free to move this to a constants.ts file
  transform(value: any, args?: any): any {
    return super.transform(value, this.dateTimeFormat);
  }
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Custome DateTimeFormat Pipe Demo';
  date = new Date();
}

app.component.html

Welcome to {{ title }}!
Date: {{date | dateTimeFormat}}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DateTimeFormatPipe } from './pipes/date-time-format.pipe';

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

Output

Format Dates with a Custom Date Pipe in Angular 2 +

Angular 2 DatePipe provides different sets of formats to display in a browser. Angular DatePipe comes with @angular/common. The date input can be given as date object, milliseconds or an ISO date string.

DatePipe is a Pipe API that works using pipe operator ( | ). Accordingly, you can place date expression on the left side of the pipe, and on the right side with required date formats based on as
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
given in the official documentation.

By default, most of the predefined formats support the American date format (month/day/year). But, If you like to go with default formatting as giving in the documentation, you can use

Date : {{currentDate | date }}

Date : {{currentDate | date: 'MMM-dd-yyyy' }}

Date : {{currentDate | date: 'MM-dd-yyyy' }}

Date : {{currentDate | date: 'yMMMdjms' }}

Date : {{currentDate | date: 'yMMMMEEEEd' }}

As a good programming practice, it is always recommended to
wrap default pipe in your application. Assume, you have defined the date to be displayed as 'short' with default formatting throughout the application which angular has provided.

In case if the client asks to update the date format throughout the application the only way is to find and replace date format in the entire application which is not going to be a scalable solution in long-term.

Let's create a custom dateFormat pipe to cater this issue to configure your dateFormat in a single place.

Step 01: Create an Angular App

  $ ng new dateFormatApp

Step 02: Navigate to your dateFormatApp

  $ cd dateFormatApp

Step 03: Create a Pipe using Angular CLI

  $ ng g pipe DateFormat

So, date-format.pipe.ts looks like this:

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

@Pipe({
  name: 'dateFormat'
})
export class DateFormatPipe extends DatePipe implements PipeTransform {

  private readonly dateFormat = "dd-MM-yyyy"; // feel free to move this to a constants.ts file
  transform(value: any, args?: any): any {
    return super.transform(value, this.dateFormat);
  }
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Custome DateFormat Pipe Demo';
  date = new Date();
}

app.component.html

Welcome to {{ title }}!
Date: {{date | dateFormat}}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DateFormatPipe } from './pipes/date-format.pipe';

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

Output