Ion-datetime binding through ngModel ionic-v4

Ionic Framework
1

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>
      </ion-item>

export class ModaldetailPage{
public myDate;

constructor( ) { }

showdate(){
    console.log(this.myDate);
  }

33%20am

when i m changing variable to:

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

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

37%20am
Screen Shot 2018-08-03 at 4.11.37 am.png1980Ă—566 39.3 KB

24%20am

2

Maybe same issue as the one not yet solved: https://github.com/ionic-team/ionic/issues/14755

3

Yes same issue. need to wait then i think.

4

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.

5

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 = $event.day;
 const month: number = $event.month;
 const year: number = $event.year;
 
 const myDate = moment().year(year).month(month).date(day).toDate();
6

not working in V4. unable to extract day, month and year. can u check once? and in V4 doc of ionic said to use https://date-fns.org/

7

Doesn’t work for me neither, I have opened an issue in the Ionic repo https://github.com/ionic-team/ionic/issues/15131

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

8

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.day.value, $event.month.value and $event.year.value
}

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

42%20pm
Screen Shot 2018-08-11 at 1.47.42 pm.png754Ă—164 26.3 KB

1 Like
9

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

10

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

11

is it resolved? still same.

12

https://github.com/ionic-team/ionic/issues/15131 is solved

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

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

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

(<HTMLInputElement>document.getElementById("picker")).value