v4: ion-datetime not working, ngModel/ionChange/ngModelChange not working as well!

Ionic version: (check one with “x”) (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ ] 3.x [x] 4.x

I’m submitting a … (check one with “x”) [x] bug report [ ] feature request

Current behavior:

ion-datetime doesn’t work in v4, unable to bind via ngModel, ionChange and ngModelChange doesn’t trigger any events.

Expected behavior:

Steps to reproduce:

Related code:

<ion-item>
   <ion-label position="stacked">Event Time</ion-label>
   <ion-datetime displayFormat="h:mm A" [(ngModel)]="eventTime" (ngModelChange)="save()" (ionChange)="timeChanged($event)" pickerFormat="h mm A"></ion-datetime>
</ion-item>
<ion-button (click)="save()" expand="block" fill="outline">Save</ion-button>


export class HomePage implements DoCheck {
  eventTime: any;

  save() {
    console.log(this.eventTime);   //undefined
  }

  timeChanged(event: any) {
    console.log(event);                 //undefined
  }

  ngDoCheck() {
    console.log(this.eventTime);
  }
}

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

ionic (Ionic CLI)          : 4.0.0-rc.9 (C:\Users\albertc\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework            : @ionic/angular 4.0.0-alpha.7
@angular-devkit/core       : 0.7.0-rc.0
@angular-devkit/schematics : 0.7.0-rc.0
@angular/cli               : 6.0.8
@ionic/ng-toolkit          : 1.0.0-rc.9
@ionic/schematics-angular  : 1.0.0-rc.9

[ngrealish]

had to write in a simple converter using the pickerOptions and moment.js to get my date needed.

    this.dateTimeOptions = {
        buttons: [{
            text: 'Cancel',
        },{
            text: 'Done',
            handler: (dateModel) => {
                const dateTime = moment(dateModel.month.text + " " + dateModel.day.text + "," + dateModel.year.text).toISOString(true);
                this.eventModel.data.timestamp = dateTime;
            }
        }]
    };

    <ion-datetime
        display-format="MMM DD, YYYY"
        picker-format="MMM DD YYYY"
        min="2010"
        max="2030"
        class="form__group__item--input has-value"
        formControlName="date"
        placeholder="Select Date"
        [(ngModel)]="eventModel.data.timestamp"
        [pickerOptions]="dateTimeOptions"
    ></ion-datetime>

YMMV: I only used a date picker selecting month, day and year. If you are selecting times as well, you’ll need to include that properly inside of moment with the returned dateModel

It’s inconvenient and not exactly clean, but it works…

[kensodemann]

I am unable to duplicate this issue at all using beta.12. This included testing the ionChange event and using formControlName as such.

If this problem persists for you, please open a new issue with a link to a repo containing a sample application that duplicates the issue.

Thank you for using Ionic!