search

coachcare / npm-datepicker

Material Datepicker Fork with TimePicker by CoachCare
MIT License
32 stars 18 forks source link

Dynamically Changing Disabled Attribute Fails to Visually Update Toggle Button on First Load #14

Open andy-bond opened 6 years ago

andy-bond commented 6 years ago

When setting the [disabled]="myBoolean" attribute on the <input> item, the input is successfully disabled, but the <mat-datepicker-toggle> appears to still be a clickable item. If I toggle the myBoolean variable from true, to false, and back to true, the toggle will realize it's supposed to be disabled and will render correctly.

Example code below:

<!-- Expire on Change -->
<mat-checkbox [(ngModel)]="expireOnChange">Expire on Status Change</mat-checkbox>
<!-- Date Input -->
<mat-form-field style="margin-top:1em" appearance="outline" color="accent">
   <mat-label>Expiration Date & Time</mat-label>
  <input [disabled]="expireOnChange" matInput readonly type="datetime" [matDatepicker]="picker" [(ngModel)]="expiration" />
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker type="datetime" clockStep="5" #picker></mat-datepicker>
</mat-form-field>

Image from when Dialog appears (notice the toggle is white instead of gray): image

matheo commented 5 years ago

@andybond006 you should try the latest release, I've synced the code with Angular Material and it should work now.