Updating an Ion Datetime value is way too cumbersome [v3.1.1]

Ionic Framework ionic-v3
1

TLDR:

If this can be done any other way, please help me out. I used the usual suspects (ngModel double binding and simple property binding)

Update1

The fix didn’t work T_T

Update2

The fix now works?!?
I didn’t change anything… 0_o

Ionic 3.1.1

My DateTime element is freezing up when I use the picker that shows up. After using the picker, the date does not change and my component starts to fail without warning. I’m not so sure it’s something I’m doing wrong.

A summary

  • I initialize the value on ngModel in ngAfterViewInit to a date with the format 'YYYY-MM-DD'
  • I chain actions on date updates with ionChange
  • When I update ngModel programmatically, DateTime updates correctly and the handler is triggered
  • If I try to change the date through the picker, the date does not update but the event does trigger. However, my template stops updating and things get strange without a single error thrown. Everything goes down hill from here on.
  • I thought that I was supposed to feed the dates following the displayFormat I chose in the template but turning it around just sparks errors and notices about dates not following ISO 9601 (or some such)

My template file

<button (click)="removeOneDay()">-1 day</button><br />
<ion-datetime [(ngModel)]="model" (ionChange)="dateChanged($event)" displayFormat="DD-MM-YYYY" [max]="lastDay"></ion-datetime>

My minimal component file

const format = 'YYYY-MM-DD';
class MyComponent implements AfterViewInit {
  model: string;
  currentDate: moment.Moment;
  ngAfterViewInit() {
    this.currentDate = moment();
    this.model = this.currentDate.format(format);
    // if I remove this value, I am granted a one shot use of the picker.
    // Afterwards, everything just goes bonkers
  }
  subtractOneDay() {
    this.value = this.currentDate.subtract(1, 'day').format(format);
    // on change actually triggers ionChange
  }
  dateChanged(newDate:any) {
    console.log(newDate);
  }
}

My cumbersome fix

  • import OnDestroy, ViewChild, ElementRef from @angular/core
  • import DateTime from ionic-angular
  • enrich component with OnDestroy interface
  • drop property model
  • add property @ViewChild(DateTime) dateTime: DateTime;
  • update the template as <ion-datetime displayFormat="DD-MM-YYYY" [max]="lastDay"></ion-datetime>
  • manually initialize the date in ngAfterViewInit() with this.dateTime.setValue(this.currentDate.format(format));
  • dont forget to also add that last part in subtractOneDay() method
  • get updates with let sub = this.dateTime.ionChange.subscribe(v => this.dateChanged(v));
  • don’t forget to unsubscribe manually in ngOnDestroy() (hold onto that sub somewhere)

I’m incredibly frustrated that this is not a straight-forward run-of-the-mill problem. There is no @Input() value; on DateTime so I’m forced to use [(ngModel)] which I do not like at all (in this case). The fact that things just magically break and stop working with no error in console means this issue might be related to some other imported library in Ionic

2

I don’t understand why you are using both two-way binding and a change handler.

3

I need to chain an event to each value update. I have tested this with simple property binding as such:

// I tried the generic way
[ngModel]="model" (ionChange)="dateChanged($event)"

// and this one too. I usually prefer this way
[ngModel]="model" (ionChange)="dateChanged(model)"

Either way, the component still silently crashes.

To be honest, I do not like using ngModel. I eventually have the need to split the data binding to keep tighter control on data-flow. I just don’t like the dark magic involved. I admit I am not that much of a savvy @angular user

Did this answer your question?