Extend Angular DatePipe for Timezone Abbreviations Support

Recently I was researching what will be the best way to parse dates with user specific timezone on Angular V5.

But it seems time zones abbreviations is depreciated and you can only use a timezone parameter with DatePipe pipe but it’s really just a time zone offset number which is prone to incorrect parsing because of the daylight saving.

(e.g. there can be different offset number for same time zone depending on the time of year)

So I’m sharing a custom pipe that uses moment and moment timezone to extend DatePipe with the option to support also timezones abbreviations (“Europe/Prague” etc)

Hope you find it helpful, and enjoy proper time zone date formatting :)

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
import * as moment from 'moment-timezone';
/**
* A moment timezone pipe to support parsing based on time zone abbreviations
* covers all cases of offset variation due to daylight saving.
*
* Same API as DatePipe with additional timezone abbreviation support
* Official date pipe dropped support for abbreviations names from Angular V5
*/
@Pipe({
  name: 'momentDate'
})
export class MomentDatePipe extends DatePipe implements PipeTransform {
transform(
  value: string | Date,
  format: string = 'mediumDate', 
  timezone: string = 'Europe/Prague'
): string {
  const timezoneOffset = moment(value).tz(timezone).format('Z');
  return super.transform(value, format, timezoneOffset);
  }
}