I am using material calendar and i want user to select one month date only. I use minData and maxDate field. minDate is working but maxDate not working.

exmpleponent.html

<mat-calendar [selected]="selectedDate" (selectedChange)="onCalendarSelectedChange($event)" [minDate]="today" [maxDate]="maxDate"></mat-calendar>

Here is the given link:

Please help me.

I am using material calendar and i want user to select one month date only. I use minData and maxDate field. minDate is working but maxDate not working.

exmple.ponent.html

<mat-calendar [selected]="selectedDate" (selectedChange)="onCalendarSelectedChange($event)" [minDate]="today" [maxDate]="maxDate"></mat-calendar>

Here is the given link:

https://angular-pknsri.stackblitz.io

Please help me.

• javascript
• angular
• angular-material
• material-design

• 1 please share a minimal reproducible example in stackblitz. – Farhat Zaman Commented Dec 31, 2018 at 10:48
• you tagged angular-material, but it has only datepicker. SO which library are you using? – KiraAG Commented Dec 31, 2018 at 10:56
• @FarhatZaman angular-pknsri.stackblitz.io please check. – user10851063 Commented Dec 31, 2018 at 11:06
• @KiraAG angular-pknsri.stackblitz.io please check. – user10851063 Commented Dec 31, 2018 at 11:06
• @SampatSingh can you give us the edit mode for the stackblitz link? – KiraAG Commented Dec 31, 2018 at 11:09

2 Answers 2

Actually you have change the stackblitz with anil's answer. So i am updating what could have possibly gone wrong. You should create two different date objects for min and max separately.

 var minCurrentDate = new Date();
    var maxNewDate = new Date();
    this.minDate = minCurrentDate;
    this.maxDate  = maxNewDate.setMonth(maxNewDate.getMonth()+1);

    // this.minDate = new Date(2000, 0, 1);
    // this.maxDate = new Date(2020, 0, 1);
    console.log(this.maxDate, minCurrentDate,maxNewDate, maxNewDate.getMonth());

When you did setMonth() on the current date you changed the reference for min date as well. Both your minDate and max date were pointing to the same thing. After all object was the same, only the references changed. So try creating two different objects and check.

PS: Farhat raced me :P. I didn't see it.

in html

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

in ts file

 minDate = new Date(2000, 0, 1);
  maxDate = new Date(2020, 0, 1);

Reference https://material.angular.io/ponents/datepicker/examples