bug(DatePicker): Typing a date in "YYYY-MM-DD" format will format the date to "M/D/YYYY" but a day behind

TheOnlyBryan commented 1 year ago

Is this a regression?

[ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Typing a date in "YYYY-MM-DD" format will format the date to "M/D/YYYY" but a day behind. This occurs using the control in various modes, including the date range picker.

Reproduction

Steps to reproduce (can use demo on documentation page):

Render date picker with default formatting.
Type in the value "2023-07-06"
Lose focus of the input field.
The date picker changes the value to: "7/5/2023"

Expected Behavior

I expect to see the date represented in a different format with the same date value.

Value entered: 2023-07-06 Expected result: 7/6/2023

Actual Behavior

The date in the proper format, but one day behind.

Value entered: 2023-07-06 Actual result: 7/5/2023

Environment

This bug occurs on the demo page for angular material: https://material.angular.io/components/datepicker/overview

Angular: v14+
CDK/Material: v14+ (probably earlier)
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Windows

wartab commented 1 year ago

I can replicate this behaviour and it only happens on negative offset timezones. On my local Europe/Brussels timezone, it doesn't happen.

Testing around a bit with the NativeDateAdapter implementation, I was struck by mindblowing things that JS Date parsing does.

Pasing new Date("2023-07-06")/Date.parse("2023-07-06") will cause the date to be interpreted as UTC instead of the local timezone, but at midnight UTC. What the DateAdapter does is:

Parse the date. let date = new Date(Date.parse("2023-07-06")); // Wed Jul 05 2023 19:00:00 GMT-0500 (Central Daylight Time)

Create a new date but set the date properties as if the Date was UTC.

let d = new Date();
d.setUTCFullYear(date.getFullYear(), date.getMonth(), date.getDate());
d.setUTCHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
// d -> Wed Jul 05 2023 14:00:00 GMT-0500 (Central Daylight Time)

Now the date is even in the past for the UTC timezone.

Then the date is formatted using (approximately, this is just for display) the UTC timezone.

let dtf = new Intl.DateTimeFormat("en-US", {dateStyle: "medium", timeStyle: "full", timeZone: "UTC"});
dtf.format(d); // 'Jul 5, 2023, 7:00:00 PM Coordinated Universal Time'

The bug comes from the assumption that native date parsing has of assuming UTC time when only parsing a date.

One approach could be in the date picker to concatenate " 00:00:00" to the date if no time has been defined.

That said, the native date adapter isn't amazing and you should definitely try to use the Luxon (or Moment if you want a date parser that accepts almost everything) date adapter or roll your own implementation if you don't want to use external date libraries.

wartab commented 1 year ago

Not sure if there's any interest regarding this from the Angular Components team, but I can make a PR with a more robust implementation for the DateAdapter that we use and adapts to the the locale.

muneebkq commented 1 year ago

@wartab will it helps us to make input display value at dd-mm-yyyy(1-10-2023) rather than dd/mm/yyy (1/10/2023) can we achieve this fomat via MatNativeDateModule as moment support has been dropped

mmalerba commented 1 year ago

@wartab you can send a PR for it my way and I'd be happy to review. As you mention, the NativeDateAdapter is somewhat limited in its usefulness, but it would be good to improve it if possible.

wartab commented 1 year ago

https://github.com/angular/components/pull/27495 This is the PR.

wartab commented 1 year ago

@wartab will it helps us to make input display value at dd-mm-yyyy(1-10-2023) rather than dd/mm/yyy (1/10/2023) can we achieve this fomat via MatNativeDateModule as moment support has been dropped

You can already do that by making use of locales in Angular. The default is en-US, but in angular.json, you can configure that.

femithz commented 8 months ago

@mmalerba Hello kindly help @wartab review the PR, Thanks.

angular / components