Format date using pipe and append local time zone – Angular

In this article, we discuss Format date using pipe and append local time zone – Angular

Format date using pipe and append local time zone – Angular

Format date using pipe and append local time zone - Angular
Format date using pipe and append local time zone – Angular

Format date using pipe and append local time zone – Angular

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 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 that 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 that will be giving the local time zone. Let us check the 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 filtering date and appending the local time zone along with that.

Source: Various

Also Checkout Date filtering and formatting in Angular js

If you interested in the Entertainment genre please check this also thebiographys.com

Related Posts

Leave a Reply

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