angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

bug(DatePicker): Date Range validation error #27170

Open lesteral opened 1 year ago

lesteral commented 1 year ago

Is this a regression?

The previous version in which this bug was not present was

No response

Description

Date range picker gives wrong feedback "Invalid end date"

Reproduction

Steps to reproduce:

  1. start at Date range picker forms integration | Datepicker examples | Angular Material
  2. for Start Date, type "1/1/2022", then Tab
  3. for End Date, type "12/31/22", then Tab
  4. so far, so good - see feedback: Selected range: { "start": "2022-01-01T05:00:00.000Z", "end": "2022-12-31T05:00:00.000Z" }
  5. click in End Date, change to "12/31/21" (i.e., end of the previous year)
  6. as expected: "Invalid end date" - feedback: Selected range: { "start": "2022-01-01T05:00:00.000Z", "end": "2021-12-31T05:00:00.000Z" }
  7. click in Start Date, change to "1/1/21", then Tab into "End Date" (no change - still 12/31/21)
  8. feedback now (as expected): Selected range: { "start": "2021-01-01T05:00:00.000Z", "end": "2021-12-31T05:00:00.000Z" }
  9. however, still shows "Invalid end date" - even though the date range should now be valid
  10. further, Tab out of End Date, still shows "Invalid end date" - THIS IS THE ISSUE
  11. click in End Date, backspace and re-enter "12/31/21" - only now does the error message go away
  12. with some similar machinations, one can get "Invalid start date", with feedback: "Selected range: { "start": "2022-01-01T05:00:00.000Z", "end": "2022-12-31T05:00:00.000Z" } - i.e., wrong feedback even with good data Date range picker forms integration - Invalid end date

Expected Behavior

no error message

Actual Behavior

"Invalid end date"

Environment

lesteral commented 1 year ago

Here's another screenshot which more clearly (directly) corresponds with the "Steps to reproduce" Date range picker forms integration - Invalid end date

lesteral commented 1 year ago

this looks similar to #24075