I am using ion-datetime
to pickup time between two range. I have tried to used [max]
and [min]
attributes but it didn’t work out and I have settled for a solution with [hourValues]
This is the code in my HTML file
<ion-datetime displayFormat="HH:mm" [hourValues]="hourValues" [(ngModel)]="pickUpTime"></ion-datetime>
And the code in TS file
minTime: string = "2016-12-14T11:30:51.620Z";
maxTime: string = "2016-12-14T14:30:51.620Z";
ngDoCheck() {
if(this.pickUpTime > this.maxTime) {
this.pickUpTime = this.maxTime;
} else if (this.pickUpTime < this.minTime) {
this.pickUpTime = this.minTime;
}
console.log("this.pickUpTime", this.pickUpTime);
}
The issue I’m having is that console.log() shows the correct value for pickUpTime
but that is not reflected in the view. For instance, here I choose 11:22 and value was changed with ngDoCheck() but remained at 11:22 in the view.
Any idea on how to tackle this?
I tried to used ngZone and change the code in ngDoCheck() but it didn’t work
ngDoCheck() {
this.zone.run(() => {
if(this.pickUpTime > this.maxTime) {
this.pickUpTime = this.maxTime;
} else if (this.pickUpTime < this.minTime) {
this.pickUpTime = this.minTime;
}
});
console.log("this.pickUpTime", this.pickUpTime);
}