Skip to content

bug(DateRangePicker): Validation Errors are inconsistent and/or broken #31836

@Panossa

Description

@Panossa

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

Hello, I'm currently trying to use DateRangePicker in my company's project but I came across some validation problems. Since I can't show my code, I will be using the example given in the docs to show a few of the weird behaviors I noticed. You can follow along with the Date range picker forms integration example in the docs.

I'm sorry for not using the intended way of creating the bug request but I saw no way to report basically identical bugs in one ticket in another way.

Reproduction

Link: see description
Steps to reproduce:

Bug 1: Start/end stays invalid, then fixed by proxy

  1. Set valid start & valid end (e.g. 9/9/2020 - 9/9/2020)
  2. Set invalid end (e.g. 31/31/2020)
  3. Make end valid by changing start
    => Expected: end is valid. Actual: end is still marked as invalid. This is because of the default Angular Forms behavior but I wish it would be overridden by DatePicker for these cases for better UX.

Bug 2: Any date invalid by itself won't show error message but turn field red

  1. Set valid start & valid end (e.g. same as above)
  2. Change day of start/end to e.g. 90 to make it invalid.
    => Expected: start/end field is marked red and an error message is displayed below. Actual: field is marked red but no error message appears.

Bug 3: The only way to make both errors show at the same time is ... weird

  1. Set valid start & valid end (e.g. same as above)
  2. Change end date to be earlier than start date
  • Expected: end date marked red (because end < start?) but no error shown as both dates are still valid on their own and no specific mat-error is listed for this case in HTML.
  • Actual: shows end date message (even though both are technically valid by themselves?)
  1. Edit start date to invalid date, then directly back to valid date
    => Expected: same as above. Actual: shows start and end date message, even though start is now valid again and end date was never invalid by itself? Also, the start message should've appeared when it got invalid, not just now.

Expected Behavior

see above

Actual Behavior

see above

Environment

  • Angular: Tested with V17 - V20.2.2. Possibly valid for all versions with a DatePicker
  • CDK/Material: Whatever is appropriate for given Angular version (any).
  • Browser(s): Chrome (newest)
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 and 11 (Pro, 64bit)

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/datepicker

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions