angular / angular/components

feat(DatePicker): Month range selection in mat-datepicker / mat-calendar

Open
#27,922 6 comments 2 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

Proposed Implementation:
I suggest adding an option to the **mat-date-picker/mat-calendar** component that allows users to select a range of dates by clicking on a start date and an end date within the same calendar view. This would provide a more intuitive and efficient way to handle month-based selections. the similar implementation is observed in **mat-date-range-picker**

### Use Case

The month range selection feature would be particularly useful in scenarios where users need to filter or select data over a specific period, such as monthly reports, statistics, or date-based filtering. Eg. salary reports, time and attendance reports etc

Contributor guide

Open the contributing guide

Research direction

Start by comparing the existing mat-date-range-picker behavior with the mat-datepicker and mat-calendar components named in the issue. Determine the expected interaction for selecting a start and end month within one calendar view, including how the option should be exposed and how completion should be verified.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.