0

I'm using angular material datepicker.But in that datepicker I want o show only current year .. any idea how do I do that ?

You can refer the provided link
https://material.angular.io/components/datepicker/overview

Priyanka
  • 370
  • 1
  • 6
  • 15

1 Answers1

3

You can use matDatepickerFilter to filter your date range.

<input matInput [matDatepickerFilter]="dateFilter" [matDatepicker]="picker">

And you can filter the date range you wants in the dateFilter method.

  dateRange = [new Date(new Date().getFullYear(), 0, 1),
               new Date(new Date().getFullYear(), 11, 31)]

  dateFilter= (d: Date): boolean => {
    return (d >= this.dateRange[0] && d <= this.dateRange[1])
  }
Thilina Koggalage
  • 1,044
  • 8
  • 16
  • Hi Koga .. Thanks for ur reply.. But instead of giving the dates manually can we make it dynamic ?? – Priyanka Nov 08 '19 at 09:28
  • 1
    new Date().getFullYear(), 0, 1), .getFullYear() will return current yer. 0 for January (Month, starting from 0. So december is equals to 11). 1 for date. – Thilina Koggalage Nov 08 '19 at 09:30
  • 1
    In ts. file minDate = new Date() maxDate = new Date(new Date().getFullYear(), 11, 31) – Priyanka Nov 08 '19 at 09:41
  • https://angular-hzfeq3.stackblitz.io .. Hi Koga ..Please check this link .. Do u know how disable the year popup in the top .. coz you can see except current year rest all the years are disabled .. so no point of showing all the years – Priyanka Nov 08 '19 at 09:45
  • 1
    This might help you. https://stackoverflow.com/questions/53595066/angular-material-7-datepicker-disable-multi-year-view – Thilina Koggalage Nov 08 '19 at 09:56