Ability to customize the default format for DatePipe

[dev054]

Which @angular/* package(s) are relevant/releated to the feature request?

common

Description

Currently the DatePipe defaults the format to mediumDate. It would be great if we could provide an InjectionToken to customize it, like we already do for timezone and locale.

Proposed solution

Like the DATE_PIPE_DEFAULT_TIMEZONE, we could have something like DATE_PIPE_DEFAULT_FORMAT, so we can avoid to pass the most common format used in app (in my case shortDate) for every | date or even create our own pipe to override the default one.

Alternatives considered

Create our own pipe, but I'd prefer to avoid this... imagine if every app has its own DatePipe? Also that sounds a bit weird to have InjectionToken for timezone and locale, but not for the format.

[flash-me]

One could easily extend this:

1. Create InjectionToken

export const DATE_PIPE_DEFAULT_FORMAT = new InjectionToken<string>('DATE_PIPE_DEFAULT_FORMAT');

2. Create CustomDatePIpe that extends the DatePipe and also Injects the Token from Step 1

@Pipe({name: 'date', pure: true})
export class CustomDatePipe extends DatePipe {
  constructor(
    @Inject(LOCALE_ID) locale: string,
    @Inject(DATE_PIPE_DEFAULT_FORMAT) @Optional() private defaultFormat: string
    ) {
    super(locale)
  }

  transform(value: Date|string|number, format?: string, timezone?: string, locale?: string): string
      |null;
  transform(value: null|undefined, format?: string, timezone?: string, locale?: string): null;
  transform(
      value: Date|string|number|null|undefined, format?: string, timezone?: string,
      locale?: string): string|null;
  transform(
      value: Date|string|number|null|undefined, format, timezone?: string,
      locale?: string): string|null {
    return super.transform(value, format || this.defaultFormat || 'mediumDate', timezone,locale);
  }

}

Pass to super.transform the value of the InjectionToken if provided

3. Provide custom implementation for the DatePipe and also provide a value for the InjectionToken in NgModule

providers: [
    {provide: DatePipe, useClass: CustomDatePipe},
    {provide: DATE_PIPE_DEFAULT_FORMAT, useValue: 'shortDate'}
  ]

4. ???
5. Profit

Stackblitz example: https://stackblitz.com/edit/angular-ivy-gmtee5?file=src/app/app.module.ts

cheers
flash ⚡

[destus90]

@flash-me
I am wondering why we should add CustomDatePipe to the providers list? Does it mean we can inject this class, but where can it be needed?

[dev054]

Hey @flash-me, thanks for your input. As you may have noticed in the OP (Alternatives considered), we're aware of the option of creating our own pipe, but the feature request is to include the InjectionToken in the Framework to be paired with the other parameters: timezone and locale.

It sounds a bit strange to ask for every app to create their own @Pipe, instead of providing a token, like we're already have for the other parameters.

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[Nosfistis]

Given that we can use an injection token to customize the global timezone, this implementation should not be hard!

[misha98857]

This feature already implemented in PR #47157 and supports dateFormat and timezone customization (doc).

[JeanMeche]

This has been implemented with the DATE_PIPE_DEFAULT_OPTIONS token.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}