question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

valid dd/mm format switch sides after manual input on datepicker field

See original GitHub issue

Bug, 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:

image

Manual input:

image

~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:open
  • Created 5 years ago
  • Reactions:11
  • Comments:18 (2 by maintainers)

github_iconTop GitHub Comments

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found