CODEWITHSUNDEEP
angularangular-material
Yogesh Mali
Yogesh Mali

Reputation: 223

Disable date in mat datepicker conditionally

I am using angular material datepicker in an angular 7 project. I want to make the datepicker readonly on some condition. eg. if the date is more than the current date I want to make the datepicker readonly and not let the user to change the date.

I tried this.disableDate = true; and then tried the [readonly] property and also tried the disabled property but it does not work. How can I achieve this?

Upvotes: 1

Views: 3426

Answers (2)

Passionate Coder
Passionate Coder

Reputation: 7294

DatePiecker has max property you can set it to whatever value you want

Component

maxDate = new Date();

Template.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" [max]="maxDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Upvotes: -1

Maihan Nijat
Maihan Nijat

Reputation: 9355

Not sure how you applied the disabled property but it should work if you apply it on the input. mat-datepicker uses matInput which has disabled property. You can bind the property with your condition. The datepicker icon and the input field is disabled once the condition meets on the input.

<mat-form-field>
  <input matInput [matDatepicker]="picker" [disabled]="true">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Upvotes: 3

Related Questions