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?

Answer 1

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.

Answer 2

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

Answer 3

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);
  }
}