ionic-framework: 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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 17 (4 by maintainers)

Most upvoted comments

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…

ngrealish on Sep 4, 2018