DatePicker Date Change Confirmation

Question

So, I have a DatePicker with which I can change a specific field, but I want it to update HTML only when the user confirms this change. However, for the time being, when I use the (ionChange) event in my ion-datetime element, it automatically updates the user interface before a confirmation warning appears.

How can I make the value in my date set change only after user confirmation?

 updateStartTime(startTime) { let alert = this.alertControl.create({ title: 'Change start time', message: 'Are you sure you want to update the start time for this event?', buttons: [{ text: 'Cancel', handler: () => { console.log('cancel'); } }, { text: 'Confirm', handler: () => { console.log(startTime); } }] }); alert.present(); } 

 <ion-item detail-push> <ion-label><b>Start: </b></ion-label> <ion-datetime displayFormat="hh:mm A" [(ngModel)]="item.EventStart" (ionChange)="updateStartTime(item.EventStart)"></ion-datetime> </ion-item> 

Answer 1

You could just do the trick, keeping the old value of EventStart. I added two code samples. The HTML code will be updated first, but it will only support the updated value if you click on confirmation, otherwise it will return the DatePicker value to the old value. The second will work as you expected, but I do not know your value. Item.EventStart looks like. I just think it looks like this '00:00' pattern. Code examples will cost you more than an explanation in words :).

First

  public oldEventStart = this.item.EventStart; updateStartTime(startTime) { let alert = this.alertControl.create({ title: 'Change start time', message: 'Are you sure you want to update the start time for this event?', buttons: [ { text: 'Cancel', handler: () => { this.item.EventStart = this.oldEventStart; console.log('cancel'); } }, { text: 'Confirm', handler: () => { this.item.EventStart = startTime; this.oldEventStart = startTime; console.log(startTime); } } ] }); alert.present(); alert.onDidDismiss(() => { this.item.EventStart = this.oldEventStart; }); } 

Second

  public oldEventStart = this.item.EventStart; updateStartTime(startTime) { this.item.EventStart = new Date('2000-01-01T'+this.oldEventStart+':00.00').toISOString(); let alert = this.alertControl.create({ title: 'Change start time', message: 'Are you sure you want to update the start time for this event?', buttons: [ { text: 'Cancel', handler: () => { this.item.EventStart = this.oldEventStart; console.log('cancel'); } }, { text: 'Confirm', handler: () => { this.item.EventStart = startTime; this.oldEventStart = startTime; console.log(startTime); } } ] }); alert.present(); alert.onDidDismiss(() => { this.item.EventStart = this.oldEventStart; }); } 

Hope this helps solve your problem. Hooray!.

Answer 2

When I use the bootstrap dialog, I would use the default warning. Try changing the following: updateStartTime(startTime) to updateStartTime(startTime,e) , and then add e.preventDefault(); in the first line of this function e.preventDefault(); See if that helps. After that, you will be able to carry out everything you need in the cancel and confirmation mode.

Answer 3

Just return false to the updateStartTime function, so that the default datepicker handler associated with the change event will not be called. Like this:

 updateStartTime(startTime) { let alert = this.alertControl.create({ title: 'Change start time', message: 'Are you sure you want to update the start time for this event?', buttons: [{ text: 'Cancel', handler: () => { console.log('cancel'); } }, { text: 'Confirm', handler: () => { console.log(startTime); } }] }); alert.present(); /** prevent default datepicker behavior **/ return false; }