确认DatePicker时间更改

Question

所以我有一个DatePicker,我可以更改某个字段,但我希望它只HTML在用户确认更改时更新.但是,目前,当我(ionChange)在我的ion-datetime元素中使用该事件时,它会在我的确认警告弹出之前自动更新UI.

如何才能使我的日期选择器中的值仅在用户按下确认时更改？

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

您可以通过保留 的旧值来实现一个技巧EventStart。我添加了两个代码示例。第一个将更新 HTML，但如果单击确认，它只会保留更新的值，否则它将设置DatePicker为旧值。第二个将按您的预期工作，但我不知道您的价值是item.EventStart什么样的。我只是猜测它会类似于这种模式'00:00'。示例代码比文字解释更值得您:)。

第一

  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; });
  }

第二个

 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; });
  }

希望这将有助于解决您的问题。干杯！。