angular / angular/components

Expose information about the current range to the datepicker actions

Open
#23,042 5 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

#### What are you trying to do?

I am trying to disable the apply button inside mat-date-range-picker-actions until a range is selected

#### What troubleshooting steps have you tried?

tried to see if any events fire on day selection so I can determine if the range is correct

#### Reproduction

https://stackblitz.com/edit/angular-date-range-picker-actions?file=src/app/date-range-picker-forms-example.html
Well, here is a start point. I could not find a way to disable the Apply button until both dates are selected.
Reson is the form data is not updated until Apply is clicked and I could not find any events that trigger on day selection. There are some for year and month but not day.

#### Environment

- Angular: 12
- CDK/Material: latest
- Browser(s): N/A
- Operating System (e.g. Windows, macOS, Ubuntu): N/A

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and trace how mat-date-range-picker-actions receives state and how day selection is exposed. Done means the actions can determine whether both dates in the current range are selected, allowing the Apply button to remain disabled until the range is complete.

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
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.