angular / angular/components

datepicker: shows date using provided LOCALE_ID but parses date using default US locale (or a combination of them)

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

Description

#### Bug, feature request, or proposal:
Bug. I don't think it is working like that on purpose.

#### What is the expected behavior?
Date picker uses provided en-GB LOCALE_ID for parsing typed in date - 27/10/2018 input manually by typing is valid

#### What is the current behavior?
Typed date is parsed using US locale - 27/10/2018 input manually is invalid, 12/01/2018 is December, not January.

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-datepicker-locale?file=main.ts

1. Select 27/10/2018 using date picker.
2. Modify the date by editing the input to 26/10/2018
3. Observe invalid input

#### What is the use-case or motivation for changing an existing behavior?
Make material datepicker great again! But seriously: it seems like if a culture is provided it should affect both parsing and formatting aspects of dealing with dates and not format it into a date which is considered invalid when updated by typing.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
As in demo: Angular 7.1.0 Material 7.1.0. It fails validation on chrome if day (month?) is over 12, but on IE 11 is more curious as it modifies the year, I am fairly sure the swap issue causes it to work incorrectly on any browser.

#### Is there anything else we should know?
I think it may have been an issue with parsing the text date from text - it seems like it would parse using US culture ignoring provided locale.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz and its main.ts, reproducing the en-GB datepicker behavior by selecting and then editing a date. Trace how the datepicker formats and parses typed input, then verify that dates such as 27/10/2018 are accepted consistently with the provided locale and that the existing reproduction no longer fails validation.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, internationalization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.