How do I create a custom locale for the angular 2 date pipe? I would like to be able to use it as follows {{value | date:'short'}} and have the relevant date format displayed.
From this answer I know how to set the locale in angular using a provider but nowhere in the angular source code can I seem to find the locale files used by the date pipe or how they are included into the angular 2 package.
To be clear I do not want to have to do the following: {{value | date:"MM/dd/yy" }}.
It would seem that there is no way of doing this & in fact probably never will be for the built in Angular2 date pipe.
The Angular2 team has chosen to implement locale support by means of the Internationalization API as mentioned at the top of the date pipe source file:
WARNINGS:
- this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera browsers.
In theory this means that we should never need to worry about locale formatting because it will all be available via a specification controlled API provided directly by the browser.
In practice however we face the problem of having to worry about whether or not the browser supports all future locales you are ever likely to need in your application. The very first locale I tried (fr-CH) did not work which lead me to post this question. It seems that Chrome currently only supports fr (no dialects) as stated here (although this link is for Chrome apps I think it is safe to assume that this shares code with their Intl implementation)
Since there doesn't seem to be any allowance in the Internationalisation API for adding custom locales my best alternative is to implement a custom pipe using the moment library; based on the example take from this reddit post, courtesy of deadcorps3 (concept code only):
// Locale settings
let locale = getUserSelectedLanguage(); // retrieve from somewhere else
@Pipe({
name: 'i18nDate'
})
export class I18nDatePipe implements PipeTransform {
transform(value: string, format: string): string {
let momentDate = moment(new Date(value));
if (momentDate.isValid())
return momentDate.locale(locale).format(format);
else
return value;
}
}