-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Open
Labels
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/datepicker
Description
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
- Set valid start & valid end (e.g. 9/9/2020 - 9/9/2020)
- Set invalid end (e.g. 31/31/2020)
- 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
- Set valid start & valid end (e.g. same as above)
- 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
- Set valid start & valid end (e.g. same as above)
- 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?)
- 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)
rms2219
Metadata
Metadata
Assignees
Labels
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/datepicker