angular / angular/components

feat(MatDateRangePicker): Add selection event

Open
#27,793 0 comments 0 reactions 0 assignees View on GitHub
area: material/datepicker feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

Add the ability to be notified when the date range selection change but is not yet applied.

The _dateChange_ output of MatDatepickerInput is not a solution because it notify once the range changed AND applied.

Similar to the outputs _monthSelected_ or _yearSelected_ we already have, it could be _rangeSelected_.

### Use Case

A use case for this is would be to preview the current range selection.

For example, because the datepicker it is not a double calendar (like the one in #20613), it is difficult to see when the range starts or end when it spread over several months.

![image](https://github.com/angular/components/assets/1118107/b2e7f5dd-2596-4ca2-8a94-b28344ffb008)

In the meantime, the hack I found is to override the DefaultMatCalendarRangeStrategy with an observable that I reinject in my component to be notified when the range change.

Contributor guide

Open the contributing guide

Research direction

Start by comparing the existing monthSelected and yearSelected outputs with MatDatepickerInput's dateChange behavior, then inspect MatDateRangePicker and DefaultMatCalendarRangeStrategy. The work is done when consumers can observe an unapplied range selection through a documented rangeSelected output and the behavior is covered by the relevant component tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.