How to not show period in Angular DatePipe month abbreviation

Question

I am using a date pipe on a date field in my application. For an example, if the date is 2 January 2019, I want it to show "Jan 2019". At the moment, it shows "Jan. 2019" It adds a period after the three letter abbreviation.

My current expression inside angular curly braces is:

{{ currentReportDate | date: 'MMM yyyy' }}

According to DatePipe documentation it should already be displayed without the abbreviation period.

My providers in the app.module file looks like this:

 providers: [
    ConfigService,
    AuthGuard,
    { provide: APP_BASE_HREF, useValue: "" },
    { provide: LOCALE_ID, useValue: "en-AU" },
    { provide: "BASE_URL", useFactory: getBaseUrl },
    { provide: MAT_DATE_LOCALE, useValue: "en-AU" },
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
    UserService
  ],

Any idea how I can get it to get rid of the period?

Answer 1

It seems to be displaying the short month according to the Angular locale definition for en-AU Source Code LINK

export default [

    'en-AU', 
        ...

        ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.']***,

        ...
]

It appears the moment locale short month format for en-AU is a bit different (without the periods):

export default moment.defineLocale('en-au', {
    ...
    monthsShort : 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
    ...
});

So maybe you could utilize moment to format your date for you; possibly utililzing this moment.js pipes for Angular package.

Answer 2

I don't see any real issue with your current code sample apart from your date format is wrong, and should be:

{{ currentReportDate | date: 'd MMM yyyy' }}

output: 2 Jan 2019

Here is a working example: https://stackblitz.com/edit/angular-grgual

After seeing your comment, you could always do: {{(currentReportDate | date: 'd MMM yyyy').replace(".", "???")}} but this is definitely a dirty work around.