Monday, October 23, 2017

Format date using pipe and append local time zone - Angular

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

    name: 'dateFormatPipe',
export class dateFormatPipe implements PipeTransform {
    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


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

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;


Finally our html

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

Dont forget to add your dependencies into the 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'

  declarations: [
  imports: [
  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.

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

No comments :

Post a Comment