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

2023-07-06T12:58:12.000Z

### 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): 1. Render date picker with default formatting. 2. Type in the value "2023-07-06" 3. Lose focus of the input field. 4. 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

(7 留言) (0 反應) (0 負責人)TypeScript (24,044 star) (6,650 fork)batch import

P3area: material/datepickerhelp wanted

描述

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

貢獻者指南

技術棧: typescriptangularhtmlcss
領域: frontend
議題類型: bug
難度: 3
預計時間: 1-2 days
活動狀態: active
清晰度: clear
前置要求: Angular Material basicsJavaScript Date handling
新手友善度: 70
研究方向: Examine the Angular Material DatePicker component's input parsing logic, specifically how the date string is interpreted and converted to a Date object. The issue likely stems from timezone handling where the date is parsed as UTC and then displayed in local time, causing a day offset. Look at the date adapter implementation in the @angular/material/core package, particularly the NativeDateAdapter. Consider contributing a fix that ensures the date is parsed correctly regardless of timezone.