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?
The date filter formats a date to a specified format. By default, the format is "MMM d, y" (Jan 5, 2016).
By default, pipes are defined as pure so that Angular executes the pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (such as String , Number , Boolean , or Symbol ), or a changed object reference (such as Date , Array , Function , or Object ).
The Angular DatePipe is used for formatting date according to the given data formats, locale information, and timezone. Applications need input data to show the desired information on the screen. Angular developers use different functionalities to increase the engagement of the user with the application.
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);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With