Angular Material Date picker. How to show only years from range (Ex: i need to show only the dates from 1950 to now) remaining years shouldn't show

Question

I am using Angular material Datepicker for date selection in My project. can anyone have a Solution to show years from a particular range.

Ex: I want to show years from 1950 in my Material Date Picker. years before 1950 should be removed from Datepicker. is there any solution for this from Angular Material.

score 1 · Answer 1 · answered May 15 '20 at 08:47

1

I have tested below code.Declare minDate and use it in tag

typescript code

export class DatepickerMinMaxExample {
  minDate: Date;


  constructor() {

    this.minDate = new Date(1950, 0, 1);

  }
}

html Code (Use [min]="minDate" )

<mat-form-field class="example-full-width">
  <mat-label>Choose a date</mat-label>
  <input matInput [min]="minDate" [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

answered May 15 '20 at 08:47

Vishal Pawar

356
4
12

i used [min] but it will disable the previous years it is not removing those years from DOM – Santosh Raju May 15 '20 at 09:34
Try this link. if you edit min date to 1950, back arrow for year gets disable. https://stackblitz.com/angular/ndkgpabgmxg?file=src%2Fapp%2Fdatepicker-min-max-example.ts – Vishal Pawar May 15 '20 at 10:07
1

in the above stackblitz is ok for min max i need to remove before years from html in datepicker – Santosh Raju May 16 '20 at 08:54
But is it possible not to show those years, months and day which are outside the min and max values? – Robert Głowacki Jun 01 '21 at 09:12

Angular Material Date picker. How to show only years from range (Ex: i need to show only the dates from 1950 to now) remaining years shouldn't show

1 Answers1