Format date using pipe and append local time zone - Angular

Angular 2(+)Angular4/5Date FilteringLocal time zone

Since most of the countries have different time zone and date time, it is important to show local time zone for users. Let us check how we can format a date and append a local time zone along with that. I will be creating a simple pipe and append the local time zone along with that. I will be adding local time zone logic into a service file, advantage is that you can easily inject and use it anywhere.

Angular pipe

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

@Pipe({
    name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
    timeZone:string;
    constructor(public _userData: userDataService) {
        var date = new Date();
        this.timeZone = this._userData.getLocalTimeZone(date);
    }
    transform(value: string) {
        var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, 'MMM dd yyyy') +' '+ this.timeZone;
        return value;
    }
}

Above is a simple pipe which will format the date, I have written more about this, if interested you can check this link (date filtering and formatting using pipe). And I have injected a service file which will be giving the local time zone. Let us check service file code

Service

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

@Injectable()
export class userDataService {
 _timezone: any = null;
 _timeZoneAbbr: any
 getLocalTimeZone(dateInput: any) {
   if (this._timezone) return this._timezone;

   var dateObject = dateInput || new Date(),
   dateString = dateObject + ""

   this._timeZoneAbbr = (
     dateString.match(/\(([^\)]+)\)$/) ||
     dateString.match(/([A-Z]+) [\d]{4}$/)
   );

  if (this._timeZoneAbbr) {
   this._timeZoneAbbr = this._timeZoneAbbr[1].match(/[A-Z]/g).join("");
  }

  if (!this._timeZoneAbbr && /(GMT\W*\d{4})/.test(dateString)) {
   return RegExp.$1;
  }

  this._timezone = this._timeZoneAbbr;
  return this._timeZoneAbbr;
 };

}

You can read more about services here: Communicate between a component and a service file and Share data between components using service file.

Finally our html

<p>{{currentTime | dateFormatPipe}}</p>

Dont forget to add your dependencies into the module.

Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {userDataService} from './userDataService';
import {dateFormatPipe} from './pipes'

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

We are done, you can inject the service file and reuse it anywhere in the application. In this article we have discussed about filtering a date and appending the local time zone along with that.

Angular 2(+)Angular4/5Date FilteringLocal time zone

Related Info

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

2. Communicate with parent and child component in Angular.

3. Angular client side pagination.

4. Angular show more/less pagination