Override Angular default date pipe

Question

I need to override the default Angular 7 date pipe formats (medium, short, fullDate, etc.), because I don't want to use two date pipes (the default one and a custom one), so I made the following and was wondering is a good idea to do it like so:

// extend-date.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'date'
})
export class ExtendDatePipe extends DatePipe implements PipeTransform {
  constructor() {
    super('en-US');

    this.customDateFormats = {
      medium: '...',
      short: '...',
      fullDate: '...',
      longDate: '...',
      mediumDate: '...',
      shortDate: '...',
      mediumTime: '...',
      shortTime: '...'
    };
  }

  transform(value: any, args?: any): any {
    switch (args) {
      case 'medium':
        return super.transform(value, this.customDateFormats.medium);
      case 'short':
        return super.transform(value, this.customDateFormats.short);
      case 'fullDate':
        return super.transform(value, this.customDateFormats.fullDate);
      case 'longDate':
        return super.transform(value, this.customDateFormats.longDate);
      case 'mediumDate':
        return super.transform(value, this.customDateFormats.mediumDate);
      case 'shortDate':
        return super.transform(value, this.customDateFormats.shortDate);
      case 'mediumTime':
        return super.transform(value, this.customDateFormats.mediumTime);
      case 'shortTime':
        return super.transform(value, this.customDateFormats.shortTime);
      default:
        return super.transform(value, args);
    }
  }
}

// app.component.html
{{ someDate | date: 'medium' }} // The custom format will be displayed

If I use something like {{ someDate | date: 'MM/dd/yyyy' }} it works as well.

So basically, I'm wondering is there a case where this will not work properly or maybe there is a better way to achieve this, but with different implementation?

It's a good idea. Using inheritance to do it is pretty clean, too. — alcfeoh, Jan 05 '23 at 23:25

score 14 · Accepted Answer · edited Aug 18 '21 at 08:28

You are missing out on some functionality from the date pipe. It has besides format, also timezone and locale as parameters.

Overriding a default pipe is possible, where the one which is added 'last' will get priority. To override an angular pipe throughout the app, it's enough to add your custom pipe to the declarations array of your root AppModule:

@NgModule({
  //...
  declarations: [
    //...
    ExtendDatePipe 
  ]
})
export class AppModule {}

_{note: there used to be a PLATFORM_PIPES constant to override global/default pipes, but this has been removed}

For readability and to keep localization and i18n possibilities, I would just change it to this though.:

@Pipe({
  name: 'date'
})
export class ExtendDatePipe extends DatePipe implements PipeTransform {
  readonly customFormats = {
    medium: 'xxx',
    short: 'xxx',
    // ...
  };
  
  constructor(@Inject(LOCALE_ID) locale: string) {
    super(locale);
  }

  transform(value: any, format = 'mediumDate', timezone?: string, locale?: string): string {
    format = this.customFormats[format] || format;
    
    return super.transform(value, format, timezone, locale);
  }
}

How did you came to the "pipes" property inside the NgModule config? The property did not exist on my app. However simply adding this custom pipes to "declarations" did the trick. — Pieter De Bie, Jul 26 '19 at 07:14
@PieterDeBie that's a big booboo on my end :) you are absolutely right, it needs to be `declarations`! Thanks for the heads up — Poul Kruijt, Jul 26 '19 at 07:59
It's not working in Angular 12 anymore, I tried the solution of https://github.com/angular/angular/issues/39691 but it's not overriding anything — Shadoweb, Sep 04 '21 at 08:18

score 7 · Answer 2 · answered Jan 05 '23 at 22:31

Since Angular 15, you can override the default date pipe config (format, timezone, etc.) using the DATE_PIPE_DEFAULT_OPTIONS injection token. It works like this in your app.module.ts:

providers: [
  {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {dateFormat: 'mm/DD/yy'}}
]

Official documentation

score 0 · Answer 3 · answered Jul 28 '23 at 21:30

The bests solutions have be explained in the past answers. Just only for information, is possible override multiple predefined formats of angular:

import {
  FormatWidth,
  registerLocaleData,
} from '@angular/common';
import {
  ɵLocaleDataIndex,
} from '@angular/core';
import locale from '@angular/common/locales/{yourLocale}';

const dateFormats = locale[ɵLocaleDataIndex.DateFormat] as string[];

/**
 * Override/replace "mediumDate" with the format "shortDate", consequently
 * changing "medium" as well.
 */
dateFormats[FormatWidth.Medium] = dateFormats[FormatWidth.Short];

/**
 * Override/replace "shortDate" with the format "MM/yyyy", consequently
 * changing "short" as well.
 */
dateFormats[FormatWidth.Short] = 'MM/yyyy';

registerLocaleData(locale);

Howover, can be broken easily by angular next updates if implementation is changed.

Override Angular default date pipe

3 Answers3

Linked