Topic: Datepicker can't be disabled on reactive form

ammi pro asked 1 year ago


I am trying to disable datepicker on a reactive form, but only input is disabled. User still can click on a toggle and select date on the disabled datepicker. It use to work correctly in MDB4. How to fix it? Thanks.

HTML:

<mdb-form-control>
    <input
      formControlName="csaDueDate"
      mdbInput
      [mdbDatepicker]="dpCsaDueDate"
      type="text"
      class="form-control"
      id="icsaDueDate"

    />
    <label mdbLabel for="icsaDueDate" class="form-label">Due Date</label>

      <mdb-datepicker-toggle [mdbDatepicker]="dpCsaDueDate"></mdb-datepicker-toggle>

    <mdb-datepicker #dpCsaDueDate [inline]="true" [format]="formatDate"></mdb-datepicker>
  </mdb-form-control>

TS:

 this.scheduleForm = this.fb.group({
  csaDueDate: [],
});
get csaDueDate(): AbstractControl {
return this.scheduleForm.get('csaDueDate')!;}
 this.csaDueDate.disable();


You can disable the toggle component by setting its disabled input to true:

<mdb-datepicker-toggle [mdbDatepicker]="datepicker" [disabled]="true"></mdb-datepicker-toggle>

The toggle should probably inherit the disabled state from the input by default. I added a new task and we will take a closer look at that.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 3.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: W10
  • Provided sample code: No
  • Provided link: No