Ion-toggle and ion-datetime not working together

Ionic Framework ionic-v3
1

I have a simple app where I am using along with an . It is supposed to display the date-time picker every time I toggle the control to “On”. But it does not.

Following is my code. Would appreciate if somebody can point what I am doing wrong.

  <ion-item>
    <ion-label>Date Filter:</ion-label>
        <ion-toggle [(ngModel)]="showDateFilter" (ionChange)="dateChanged()"></ion-toggle>
        <ion-datetime displayFormat="MM/DD/YYYY" pickerFormat="MM/DD/YYYY"
            [(ngModel)]="dateFilter"  [(disabled)]="!showDateFilter" (ionChange)="dateChanged()"></ion-datetime>
  </ion-item>

In the TS file, I have ‘showDateFilter’ set to ‘false’ initially. The [(disabled)] attribute in should change it to ‘true’ (or ‘false’ depending on its current value) and it does change the value. I am printing the value on console.

dateChanged() {
console.log(‘in dateChanged()…showDateFilter is:’, this.showDateFilter);
if(this.showDateFilter) {
console.log(‘in if()…showDateFilter is:’, this.showDateFilter);
//Some logic here…
}
else {
console.log(‘in else()…showDateFilter is:’, this.showDateFilter);
// Some logic here…
}
}

However the date-time picker is not getting displayed.

Any help will be highly appreciated.

Thank you.

2

Finally figured it out! I do not know how to close a topic so…

Well, I feel bad for wasting some much time on this stupid thing!

Found it accidentally though. Toggling on the the does not open the date-picker, you have to click/tap on that control (anywhere except the toggle itself) to get the date-picker displayed!