angular / angular/components

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

オープン
#23,593 コメント 10 件 リアクション 2 件 担当者 0 名 GitHub で見る
area: material/datepicker feature P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、issue で説明されている 2 つの API アプローチを入口として、mat-datepicker、mat-calendar の selectedChange イベント、mat-datepicker-actions の相互作用を追跡します。完了条件は、maintainers が望む動作が明確な consumer 向け API として実装され、datepicker が追加の選択コントロールを必要とせずに静的なフッターコンテンツを引き続きサポートすることです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。