CODEWITHSUNDEEP
angularangular-material
jgritten
jgritten

Reputation: 1003

Disable Start Date in Material Date Range Picker

Problem: I need to conditionally disable the editing of the Start Date.

Following the documentation Datepicker | angular Material

In particular cases, I require that the start date should be uneditable. If its passed in as Sept 15, 2020, then it needs to stay that way. However, when the calendar is opened, a user can just simply click a few times and the start date will be changed.

thanks for the help in advance

Upvotes: 0

Views: 1550

Answers (2)

Eustáquio
Eustáquio

Reputation: 41

I don't know if my solution will be useful for you. I used a variave to save the start date and a function that observes the changes in the formcontrol.

 changeStartDate(){
  this.formEditOffer.get('dataRange').get('start').valueChanges.subscribe(data=> {
    if(data !== this.startDate){
      this.formEditOffer.get('dataRange').get('start').patchValue(this.startDate)
    }
  });
 }

Upvotes: 1

Edward
Edward

Reputation: 1126

according to the docs, you can disable the date selection using the disabled property

<p>
  <mat-form-field appearance="fill">
    <mat-label>Completely disabled</mat-label>
    <input matInput [matDatepicker]="dp1" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
    <mat-datepicker #dp1></mat-datepicker>
  </mat-form-field>
</p>

with this you should be able to dynamically se the disabled property based on whatever condition you need. i.e.

<input matInput [matDatepicker]="dp1" [disabled]="ENTER YOUR CRITERIA HERE">

with this you should be able to disable the input based on your business rules

Upvotes: 0

Related Questions