angular / angular/components

feat(datepicker-actions): option to close on date selection or expose selectedChange on datepicker

Đang mở
#23,593 10 bình luận 2 reaction 0 người được giao Xem trên GitHub
area: material/datepicker feature P3
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ả

#### Feature Description

Currently when a datepicker has a datepicker-actions component in it's content, it blocks the datepicker from closing on date selection. I'd like a way to have datepicker-actions in my datepicker component but still get the close on date selection behavior. There are 2 ways that I see of accomplishing this.

**Expose the `selectedChange` event that already exists on mat-calendar**
If the user had access to this they would easily be able to close the datepicker manually. Here's a usage example:
```html


Some static content for the user to read in the datepicker

```
It also makes sense to expose this now because before `datepicker-actions` the `datepicker` would close on selection, but now that it's held open, an app may need to do some logic on selection change and this would enable that.

**Add `closeOnSelection` input to `mat-datepicker-action`

Simply add a boolean input that allow datepicker-actions to be configured to close on selection. This one is more straightforward and probably easier for consumers to understand but not as versatile as the above solution.

#### Use Case

The most common use case would be when a consumer wants to put static content in the footer of the datepicker. Personally I am using `dateClass` to highlight dates I want to recommend for the user and want to put a key in the footer to describe what the different highlighted colors are supposed to indicate. I currently have to also add a `SELECT` and `CANCEL` button due to the way the datepicker behaves with actions, so my footer much bigger than it needs to be and the user has an extra click for each date they select.

#### Work

I've contributed before and have a pretty good idea how to implement either of the options presented above. So if the material team is interested please let me know which option would be best and I can start a PR.

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

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

Hướng nghiên cứu

Bắt đầu bằng cách theo dõi sự tương tác giữa mat-datepicker, sự kiện selectedChange của mat-calendar và mat-datepicker-actions, sử dụng hai cách tiếp cận API được mô tả trong issue làm điểm bắt đầu. Được xem là hoàn tất khi hành vi được các maintainer ưu tiên đã được triển khai với một API rõ ràng dành cho consumer và datepicker vẫn hỗ trợ nội dung footer tĩnh mà không yêu cầu các control chọn bổ sung.

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
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/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.