Ion-datetime binding through ngModel ionic-v4

i am binding through ngModel. but variable returning always undefined. i am using ionStyle event.

<ion-item class="itemdiv">
        <ion-label class="modtitle" position="floating">First Contact</ion-label>
        <ion-datetime display-format="DD/MM/YYYY" id="dat" [(ngModel)]="myDate" (ionStyle)="showdate()"></ion-datetime>
export class ModaldetailPage{
public myDate;

constructor( ) { }



when i m changing variable to:

public myDate = new Date().toISOString();

then always getting current date. not changed value by picker.


Maybe same issue as the one not yet solved:

Yes same issue. need to wait then i think.

I think that issue was resolved in the latest release i think. DateTime now binds with ngModel for me.

But instead of getting an ISOString from the binding I’m getting an object with seperate properties for day, month, year, etc. I don’t know what to do with?

Also if you select that first value from a column (such as 01 day of the month) the value for that property is returned as null (eg month property is null).

Not sure if I’m doing something wrong, but somethings up.

For me I think it was already like this in v3. I implemented a datetime for the first time ever last week and this is the result I get

 const day: number = $;
 const month: number = $event.month;
 const year: number = $event.year;
 const myDate = moment().year(year).month(month).date(day).toDate();

not working in V4. unable to extract day, month and year. can u check once? and in V4 doc of ionic said to use

Doesn’t work for me neither, I have opened an issue in the Ionic repo

I have also documented a workaround in the issue

P.S.: @anupzone about date-fns or moment, Ionic gives a recommendation, not a must. Both libs have their advantages and disadvantages, your call

perfect :slight_smile:

ur work around is:

<ion-datetime #myPicker displayFormat='DD/MM/YYYY' (ionChange)="updateMyDate(myPicker.value)"></ion-datetime>

updateMyDate($event) {
  console.log($event); // --> wil contains $, $event.month.value and $event.year.value

in V4 method is not “ionChange”, its “ionStyle”. change that. i got result:

1 Like

yet but like I said in the issue, if user don’t select a value, like if he/she let the default “1” you don’t get “1” but you get null instead

yes that’s the another issue. without event firing can’t get values.

is it resolved? still same. is solved

the following seems to work, not sure that’s the right way but seems to work

updateMyDate($event) {
  const day: number = $;
  const month: number = $event.detail.value.month.value;
  const year: number = $event.detail.value.year.value;

i m using without $event fire. getting same json from id