angular / angular/components

Change the year range in a multi-year view in mat-datepicker

Open
#18,227 6 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: material/datepicker feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

Feature Description

The possibility to control the year range in a multi-year view in the mat-datepicker in Angular Material 7.

What is the current behavior?

Currently the default range of 24 years starts from 2016-2039, and each page backwards offers another 24-year range.

Use Case

I need to show a different year range in the multi-year view in the mat-datepicker. I need the possibility to manipulate the year range to be different than the default (which is 2016-2039 in the starting view), e.g. 2010-2033.
This will improve the UX of an application where customers mostly select years beginning from 2010 (customers now need to go to the previous page with a year range from 1992-2015.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the mat-datepicker implementation and its existing test coverage to locate how the multi-year view selects its initial 24-year range. Done means callers can configure a different range and the initial multi-year view reflects that range, including the 2010–2033 example.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.