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.

bug(DATEPICKER): Datepicker format Date doesn't work if you type it

See original GitHub issue

Reproduction

You can find a example here: https://stackblitz.com/edit/angular-nhkztz (Its a fork if the Documentation on Stackblitz)

Steps to reproduce:

click on the calendar icon next to the input
Select a Date from the popup (f.e. 04.08.2020)
The input displays: 04.08.2020
Now change the value in the input to 04.08.2021 (Its important to have a input event here)
leave the input by tap or by clicking nect to the input (NOT ON THE CALENDAR ICON!)
The input displays:

in chrome: 08.04.2021
in Edge: 04.01.2008
in FireFox: 04.01.2008

Expected Behavior

I expect to see the date I just typed.

Actual Behavior

If you set the date by hand (keyboard) and you use a custom format, the value is parsed wrong (The format is not processed correctly here)

Environment

OS Windows 10 Surface Book2 Chrome 84.0.4147.125, Edge 84.0.522.59 , FireFox 78.0.2


  "dependencies": {
    "@angular/animations": "^10.0.0",
    "@angular/cdk": "^10.0.0",
    "@angular/common": "^10.0.0",
    "@angular/compiler": "^10.0.0",
    "@angular/core": "^10.0.0",
    "@angular/forms": "^10.0.0",
    "@angular/material": "^10.0.0",
    "@angular/material-moment-adapter": "^10.0.0",
    "@angular/platform-browser": "^10.0.0",
    "@angular/platform-browser-dynamic": "^10.0.0",
    "@angular/router": "^10.0.0",
    "angular-in-memory-web-api": "~0.11.0",
    "moment": "^2.26.0",
    "rxjs": "^6.5.5",
    "tslib": "^1.11.2",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1000.0",
    "@angular/cli": "^10.0.0",
    "@angular/compiler-cli": "^10.0.0",
    "@angular/language-service": "^10.0.0",
    "@angular/localize": "^10.0.0",
    "@types/node": "^12.12.41",
    "codelyzer": "^5.2.2",
    "ts-node": "^8.4.1",
    "tslint": "^6.1.2",
    "typescript": "~3.9.5"
  }

Issue Analytics

State:
Created 3 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

mmalerbacommented, Aug 14, 2020

Your example is using a different format for parsing input vs displaying date in the input. If you switch it to use the same format for both it should behave as expected https://stackblitz.com/edit/angular-nhkztz-fhrtrs?file=src%2Fapp%2Fdatepicker-formats-example.ts

0reactions

angular-automatic-lock-bot[bot]commented, Sep 21, 2020

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Top Results From Across the Web

Jquery datepicker format date not working - Stack Overflow

This is working. Try just format option not dateFormat. Because due to different version of datepicker. – shiv. Sep 25, 2020 at 6:24....

[Bug] Datepicker showed date is not the same format as written

Select a date in the calendar, the format is dd/mm/yyyy. That is correct. image. But, if i write a date manually, the date...

Solved: Date picker: Typing in the date (date format mm.dd...

Then it is a bug I think as the date control doesn't handle it correctly if you type in the date. Maybe only...

Date Picker Format in options error - MDBootstrap

when I use: public datePickerOptions: IMyOptions = { dateFormat:'dd/mm/yyyy' };. Resources (screenshots, code snippets etc.) ... Expires is the date that should ...

Date Picker format to MM-DD-YYYY not working - OutSystems

Good day everyone! I have a problem in formatting a date using an input widget and a date picker. I try to set...