angular / angular/components

bug(datepicker): Duplicate marker on calendar pop up when inputting date that is outwith min/max dates

Đang mở
#27,573 6 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: material/datepicker P4
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### 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

I have set the min and max dates using their respective properties. When I type in a date that is after the max date, and then open the calendar, a marker appears on both the date I typed in and the max date. This behaviour could arguably be slightly confusing to the user but it is particularly misleading in the instance that the highlighted max date is actually disabled due to custom validation. The same issue can be seen for the minimum date.
![image](https://github.com/angular/components/assets/71448881/a2f4c43d-61f4-4ee1-be13-9cd381d7e33f)

### Reproduction

StackBlitz link: https://stackblitz.com/run?file=package.json (an example from the docs)
Steps to reproduce:
1. In datepicker-min-max-example.ts, adjust the max date so that it is not the last day of the month (so that the issue can be seen) e.g. change it to the 15th
2. In the input, type in a date which is after the max date - e.g. the 18th
3. Open the calendar and you will see that two dates are highlighted - the date that was typed in and the maximum date.
4. Provide a custom validator that would render the maximum date disabled e.g. if the max date was a Sunday but weekends are not allowed. Repeat steps 2 & 3 and you will see that this date is highlighted even though it is invalid.
5. Same steps for minimum date.

### Expected Behavior

I am expecting to see only one date highlighted on the calendar - just the (invalid one) that was typed in. If this is not desired, then it should still take into account other invalid/disabled dates through customer validator, so it should highlight the maximum valid date rather than the general maximum date regardless of its validity. Likewise for the minimum date.

### Actual Behavior

I saw two dates highlighted on the calendar - the date I typed in and the maximum date. The maximum date is also highlighted even when it has been rendered invalid by a custom validator, which could be misleading to users - this is the main issue. Likewise for the minimum date.

### Environment

- Angular: 16.1.6
- CDK/Material: 16.1.6
- Browser(s): Google Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Tái hiện vấn đề bằng ví dụ StackBlitz và datepicker-min-max-example.ts, trước tiên kiểm tra các bước min/max và custom-validation được mô tả. Theo dõi cách lịch đánh dấu ngày đã nhập và các ngày biên, sau đó xác minh rằng chỉ ngày phù hợp còn được tô sáng khi một biên không hợp lệ hoặc bị vô hiệu hóa.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.