確認DatePicker時間變化

所以我有一個DatePicker，我可以更改某個字段，但我希望它僅在用戶確認更改時更新HTML。但是，當我在我的ion-datetime元素中使用(ionChange)事件時，它會在彈出確認警報之前自動更新UI。確認DatePicker時間變化

我該如何讓我的日期選擇器中的值只有在用戶按下確認後纔會改變？

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>

來源

2017-04-08 Jason

您可以通過保留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; }); 
    }

希望這將有助於解決您的問題。乾杯！。

來源

2017-04-12 16:26:54

當我使用的引導對話，我會用一個防止違約。嘗試更改以下內容：updateStartTime(startTime)至updateStartTime(startTime,e)然後在該函數的第一行添加e.preventDefault();看看是否有幫助。然後，您應該能夠在取消和確認處理程序時做任何你喜歡的事情。

來源

2017-04-11 17:13:02 Adrianopolis

收到此錯誤'錯誤./EventModalPage類EventModalPage - 致：updateStartTime（項目：你能嘗試添加e將離子項目的標記無法讀取的undefined' – Jason

財產「的preventDefault」。 EventStart，e） – Adrianopolis

我已經試過，但無濟於事 – Jason

只需在您的updateStartTime函數中返回false，以便不會調用綁定到change事件的默認datepicker處理程序。就像這樣：

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

來源

2017-04-18 11:48:16

確認DatePicker時間變化

回答

相關問題