valid dd/mm format switch sides after manual input on datepicker field
See original GitHub issueBug, feature request, or proposal:
Bug
What is the expected behavior?
That the valid dd/mm/yyyy
inputed date remains as it is, not matter what, they always switch sides on change.
What is the current behavior?
E.g.: 03/02/1990
becomes 02/03/1990
.
What are the steps to reproduce?
Set a custom locale like Brasil:
// location
import localePt from '@angular/common/locales/pt';
import localePtExtra from '@angular/common/locales/extra/pt';
registerLocaleData(localePt, 'pt', localePtExtra);
Then try to use the datepicker with manual input.
What is the use-case or motivation for changing an existing behavior?
Because it works very well with the Angular locale config, there’s just this switch bug that does not work properly.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
{
"@angular/core": "^6.0.6",
"@angular/material": "^6.3.0",
}
Is there anything else we should know?
UI input:
Manual input:
~I really don’t wanna use moment.js~
It seems like the StackBlitz example isn’t wroking as well: https://stackblitz.com/angular/vnvbdjykmve?file=app%2Fdatepicker-locale-example.ts
Issue Analytics
- State:
- Created 5 years ago
- Reactions:11
- Comments:18 (2 by maintainers)
Top Results From Across the Web
How to change Mat-Datepicker date format to DD/MM/YYYY in ...
The easiest way is to change the locale: Add the following to the providers section of your module: { provide: MAT_DATE_LOCALE, useValue: ...
Read more >Datepicker in Angular using mat-datepicker | Material Design
Date picker is a component which allow users to choose a date from the calendar pop up or enter a date through text...
Read more >How to check manual input in Angular material datepicker
When entering a date manually through text input, the input would be auto-completed if it can be recognized as a valid date. However,...
Read more >How to Use Angular Material Datepicker Custom Date Format
The date is retrieved from the backend in ISO format. So we are formatting the date in dd/MM/yyyy and displaying in the list...
Read more >Solved: Date picker: Typing in the date (date format mm.dd...
Property AllowTextInput is true. If I select a date using the date picker the date will be displayed in the date format mm.dd.yyyy,...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I definitely stole most of this from some SO answer and haven’t cleaned it up, but it does seem to work.
https://gist.github.com/benjamincharity/46cdcb1155b4945ed95495780c67787e
The
format
function is the one you really want.@odahcam https://github.com/manfredsteyer/angular-material-custom-date-adapter/blob/master/src/app/shared/custom-date-adapter.ts (manfredsteyer is the same guy who made angular-oauth2-oidc)
https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3
https://medium.com/@esanjiv/working-with-custom-dateadapter-for-angular-material-2-datepicker-76d4446277dc