angular / angular/components

Change datepicker parse and display format at runtime

Open
#8,355 23 comments 50 reactions 0 assignees View on GitHub
area: material/datepicker feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Currently the parse and display format of a datepicker can only be set before runtime by providing them with ```provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS```.
As shown in the example: https://material.angular.io/components/datepicker/examples

#### What is the expected behavior?
The parse and display format of the datepicker should also be able to be changed at runtime, the same way it's possible to change the locale at runtime with ```.setLocale()```.
Maybe add ```.setDateFormat(MY_DATE_FORMAT_GENERATED_AT_RUNTIME)```, as sometimes the date format is only available after a HTTP request to the server.

#### What is the current behavior?
Date format is set in provider and cannot be changed at runtime.

#### What is the use-case or motivation for changing an existing behavior?
It should be possible to change the date format at runtime, to be able to react to date-formats, set by the backend. The user can set a preferred date format in the application and the application has to retrieve it from the server and adjust the datepicker accordingly. This is currently not possible.

Contributor guide

Open the contributing guide

Research direction

Start with the Angular Material datepicker examples and the MAT_DATE_FORMATS provider shown in the issue, then trace how setLocale() changes datepicker behavior. Define and verify a runtime mechanism for updating parse and display formats after a server response, including the expected behavior when the format changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.