-
Notifications
You must be signed in to change notification settings - Fork 27.1k
Description
Which @angular/* package(s) are relevant/releated to the feature request?
@angular/common
Description
There is no way to override the date pipe default timezone that isn't somewhat cumbersome. Add an injectable TIME_ZONE to the date pipe or allow an easier way to override pipes.
Currently Localization allows for a LOCALE_ID to be injected for the date pipe, probably with the intent that you be able to change the LOCALE_ID as needed for different areas, eg 'en-us', 'fr-ca'
We are more likely to see this feature for time zones used in:
Enterprise apps
Trading applications
Dashboards
We have seen this request before in: #19018 and #39194
but I think the description was lacking.
A small change in Angular can save a lot of work, headache, and research for a lot of people. I would love to be able to override the date pipe easily or set a default time zone. (instead of having to fix all imports of the common module application wide)
Proposed solution
Possible Solution 1:
in the same way we do localization we should also allow people to default the time-zone via an injected token.
...
export class DatePipe implements PipeTransform {
constructor(
@Inject(LOCALE_ID) private locale: string
+ @Inject(TIME_ZONE) private timezone: string
) {
...
try {
+ return formatDate(value, format, locale || this.locale, timezone || this.timezone);
} catch (error) {
throw invalidPipeArgumentError(DatePipeOverride, error.message);
}
}
...
(-) This may also require a way to describe the 'local-time' to override this new default injected time zone.
EG would it look like {{date : date 'hh:mm a' : '' }} ? to get a users local time to display?
Possible Solution 2:
Allow overriding of the common pipes in application *in the root of the project.
or allowing a pipe to module to have priority when there are conflicts.
(I am not even sure how this would work, maybe it already does in some why I am not aware of. If this is the case we could add some docs on the Date pipe angular docs, also see my Alternatives considered #3, because there is a link to a plunkr that a demo can be written in)
Alternatives considered
The alternatives are rather cumbersome, so due to the way angular imports things there is no way to guarantee these things will work, short of blocking imports in type script.
Alternative 1:
- Add a Time zone everywhere you use the DatePipe, DatePipe.transform and formatDate.
(-) Hard to maintain
(-) Difficult to enforce and know when an missed Time zone is intentional.
Alternative 2:
- Use esLint to disable the import of angular's common module.
- Override the DatePipe
- import it after the common module in every module that uses the angular common module.
(-) lots of changes required to the existing application
(-) requires esLint
Alternative 3:
- Something else?
If you think you might have a way to solve this issue without one of the two above proposed solutions
Please give it a shot here is a link with a Lazy loaded module, a eager module and one component that is declared in the root module.
https://stackblitz.com/edit/ivy-kvibh9