Angular material datepicker hide/delete disabled years

Question

I have disabled years before 2018 but I want to hide/delete them.

Range for year selection is showing from 1998 it should be 2018.

Can we show only 3-4 years cause here its showing 24 years.

enter image description here

How you have *disabled years before 2018*? – SwissCodeMen Dec 14 '21 at 22:24 — SwissCodeMen, Dec 14 '21 at 22:24

score 0 · Answer 1 · answered Dec 14 '21 at 22:55

You can limit the dates available for navigation and selection using [minDate] and [maxDate] inputs. If you don't specify any of them, you will have infinite navigation and the year select box will display -10, +10 years from currently visible month.

To set minDate and maxDate hardcoded in HTML-template:

<ngb-datepicker
        [minDate]="{year: 2018, month: 1, day: 1}"
        [maxDate]="{year: 2024, month: 12, day: 31}">
</ngb-datepicker>

If you want set the minDate and maxDate dynamically, you can set the dates in the component.ts file as follow:

now: Date = new Date();

minDate: any;
maxDate: any;

this.minDate = { year: this.now.getFullYear() - 3, month: this.now.getMonth() + 1, day: this.now.getDate() };

this.maxDate = { year: this.now.getFullYear() + 2, month: this.now.getMonth() + 1, day: this.now.getDate() };

This will give you a date-range from todays date -3 years, until todays date and +2 years.

In the HTML-template you would then have to reference to the ’minDateandmaxDate`:

<ngb-datepicker
        [minDate]="minDate"
        [maxDate]="maxDate">
</ngb-datepicker>

Actually I did using same way that's why in image years before 2018 are disabled but I want to hide/delete those years. I need to show only 2018, 2019, 2020, 2021 in date picker. — Dexter, Dec 15 '21 at 04:07

score 0 · Answer 2 · answered Dec 20 '21 at 08:15

0

There is a constant in material that controls it. yearsPerPage. Not sure if/how one can change it, though.

According to this answer, you can't override it.

answered Dec 20 '21 at 08:15

jna

926
10
18

score 0 · Answer 3 · answered May 22 '23 at 13:02

If you are still interested in this and don't mind the limited browser support, you can use :has() selector to hide the td's that have a child button which is disabled. Here is how I solved it:

Add style overrides:

::ng-deep {
  // This hides disabled calendar cells so only the clickable ones are visible
  // Note: this will hide any cell inside material angular datepicker, including year, month and day cells
  td.mat-calendar-body-cell-container:has(> button.mat-calendar-body-disabled) {
    display: none;
  }
}

Add min and max to the datepicker that you are using (date-range in my case)

<mat-date-range-input [min]="startOfReport" [max]="today">...

Result:

Angular material datepicker hide/delete disabled years

3 Answers3