DateTime change event doesn't works with a short date

Ionic Framework ionic-v3
1

I have a DateTime picker, and I need to display a short date composed of date and month parts for annual date, wich be saved into the storage. When I pass the selected date using ionChange, there is not any event returned to typescript !
There is the faulting template, it’s ok for displaying but failing with change event :

    <ion-datetime style="width:80%" value="myDate" cancelText="Cancel" doneText="Done" displayFormat="DD MMM"     pickerFormat="DD MMM" (ionChange)="change_dateValue()" [(ngModel)]="strDate"></ion-datetime>

Althought event change triggering works with a long date displaying :

 <ion-datetime style="width:80%" value="myDate" cancelText="Cancel" doneText="Done"  displayFormat="DDD DD MMM YYYY"   pickerFormat="DDD DD MMM YYYY"  (ionChange)="change_dateValue()" [(ngModel)]="strDate"></ion-datetime>

My method triggered by change event must save date to a storage :

change_dateValue()
{
this.myDate = this.BOUtils.getStringISOToDate(this.strDateCotisa);
// Save it in the storage
}

Moreover, there is my method to prefill the date :

public myDate:Date;
private fillDate()
{
         let tzoffset:number = (this.myDate).getTimezoneOffset() * 60000; //offset in milliseconds
          this.strDate = (new Date(_date.getTime() - tzoffset)).toISOString().slice(0,-1);
		// String returned model is : "2017-02-28T17:31:37.996Z" 
}

Please why does it fails ?

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
OS: Windows 8.1
Node Version: v4.5.0

2

Any response after waiting ?

3

From TFM:

Ionic uses the ISO 8601 datetime format for its value. The value is simply a string, rather than using JavaScript’s Date object.

Don’t bind <ion-datetime> components to JavaScript Date objects. In fact, IMHO, don’t ever even use JavaScript Date objects. Bind them to ISO8601 strings.

4

I know this mechanism, but I’m converting only the string to Date when recording the date into the storage.

To focus my questions : I wanted to detect the ionChange event, it doesn’ working in the template with this DATE FORMAT in ion-dateTime’s UI :

displayFormat=“DD MMM”
pickerFormat=“DD MMM”

I didn’t try it into Ionic’s final release, maybe it works ?

But it doesn’t matter, I used 2 ion-select to select the “date” and “month” elements !

5

@Youtch Hi, I think you should try the final release of ionic.

Seems like this issue was the solution for your problem:

6

If someone is still looking for the workaround, here is what you can do. Call the function on ionBlur function. But the thing is it will call when your input field gets out of focus, like when you have changed or not changed. So you have to check whether value has changed or not.
It will not call on input value’s change but on input field get’s blur (not focused)
Check this out as sample:

<ion-datetime (ionBlur)="checkChange()" placeholder="Date of Birth" displayFormat="DD-MMM-YYYY" pickerFormat="DD MMM YYYY" [(ngModel)]="pickDate" max="{{maxDate}}"></ion-datetime>

Hope this will help someone.
Cheers!!!

1 Like