New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hide years superior to max date in datepicker #10646

WizardPC opened this Issue Mar 31, 2018 · 8 comments


None yet
5 participants

WizardPC commented Mar 31, 2018

Bug, feature request, or proposal:

Proposal, change the view years if a maxdate is set.

What is the expected behavior?

If i set the maxdate as today (in 2018) i don't expect to see 2019, 2020, 2021... in the years view.

What is the current behavior?

All the years are visible but 2019, 2020, 2021... are disabled.

What is the use-case or motivation for changing an existing behavior?

I set a max date to limit the possibilities, i'm not (and the user) interrested in years that i can't select.
The extreme is if i set 2016, i can choose only this one among 24 differents years...

Which versions of Angular, Material, OS, TypeScript, browsers are affected?


Is there anything else we should know?

I think the right disabled arrow if enough for understand that you can't go further in years.


This comment has been minimized.


raygervais commented Apr 9, 2018

I'd like to try working this, adding the feature if @josephperrott you agree it's a nice to have. Thoughts? 😄


This comment has been minimized.


josephperrott commented Apr 9, 2018

I will defer to @mmalerba for if its something that he would like to have included in datepicker as he is the component owner.


This comment has been minimized.


mmalerba commented Apr 9, 2018

I think it was originally done this way because the component responsible for rendering the cells didn't actually know what the min and max were. I believe it was refactored at some point and it should now be possible to do this.

@raygervais sure I would appreciate if you're willing to take a stab at it and send me a PR.

@mmalerba mmalerba self-assigned this Apr 9, 2018

@mmalerba mmalerba added the help wanted label Apr 9, 2018


This comment has been minimized.

WizardPC commented Apr 10, 2018

@raygervais : i think it's in the datepicker/multi-year-view.ts, in the init() function we need to change the let activeOffset = activeYear % yearsPerPage;.

Actually the years view is build like that :
2018 % 24 = 2 so 2018 - 2 = 2016,2017,2018...
2039 % 24 = 23 so 2039 - 23 = 2016,2017,2018...

For the new behavior, if maxDate is not null, activeOffset = yearsPerPage - 1.
What do you think ?

From my point of view, this will end with four differents "years" view :

  1. No min or max date => Actual behavior
  2. Only the min date => activeOffset = 0 (what do you think ?)
  3. Only the max date => activeOffset = yearsPerPage - 1
  4. Both min and max date => I propose activeOffset = yearsPerPage - 1 too. Because it's seems prettier to display disabled past date than disabled future date.

Or for the fourth item, we can make minDatehaving the same behavior but with impacts :

  1. activeOffset < minDate < maxDate There will be only one page with less than 24 years.
  2. minDate < activeOffset The first page of calendar will display less than 24 years too.

This comment has been minimized.


raygervais commented Apr 16, 2018

Thanks for the explanation @WizardPC, I'll get to that very soon. Apologies for the delay, just wrapping up loose ends during the final days of the school semester and preparing for a new job. If I got a WIP PR going, would you be able to guide if in the case I stray from the agreed upon logic?


This comment has been minimized.

WizardPC commented Apr 16, 2018

@raygervais i'm not an expert but i can try :)


This comment has been minimized.

labyed commented May 7, 2018

Hi guys, any update on this ?


This comment has been minimized.


raygervais commented May 8, 2018

Sorry for the delay, I intend to get back to it this weekend. Currently adjusting to new job / location and getting everything set up.

@mmalerba mmalerba added the has pr label May 16, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment