Potwierdź zmianę daty w usłudze DatePicker

Question

Mam więc obiekt DatePicker, w którym mogę zmienić określone pole, ale chcę, aby zaktualizował kod HTML tylko wtedy, gdy użytkownik potwierdzi zmianę. Jednak obecnie, gdy używam zdarzenia (ionChange) w moim elemencie ion-datetime, aktualizuje on interfejs użytkownika automatycznie, zanim pojawi się komunikat potwierdzenia.

Jak ustawić tak, aby wartość w moim selektorze daty zmieniła się tylko wtedy, gdy użytkownik naciśnie potwierdzenie?

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

Możesz po prostu zrobić lewę, zachowując starą wartość EventStart. Dodałem dwie próbki kodu. Najpierw zaktualizuje HTML, ale zachowa zaktualizowaną wartość tylko po kliknięciu potwierdzenia, w przeciwnym razie ustawi DatePicker na starą wartość wstecz. Druga zadziała tak, jak się spodziewałeś, ale nie znam Twojej wartości item.EventStart. Domyślam się, że byłoby coś podobnego do tego wzorca '00:00'. Przykładowe kody będą warte więcej niż wyjaśnienie w słowach :).

Pierwszy

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

drugie jeden

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

nadzieję, że pomoże rozwiązać problem. Twoje zdrowie!.

Answer 2

Kiedy użyć bootstrap okno użyłbym domyślne zapobiec. Spróbuj zmienić: updateStartTime(startTime) na updateStartTime(startTime,e), a następnie na pierwszym wierszu w tej funkcji dodaj e.preventDefault(); Sprawdź, czy to pomaga. Powinieneś wtedy móc robić, co chcesz, w swoich anulujących i potwierdzających programach obsługi.

Answer 3

Po prostu zwraca false w funkcji updateStartTime, dzięki czemu domyślny program obsługi danych związany z wydarzeniem zmiany nie zostanie wywołany. Tak:

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