Ionic 3.1.0 changes ion-datetime functionality

Ionic Framework ionic-v3
1

Ionic team didn’t put it as a breaking change, but ion-datetime behavior has changed a bit. Actually, it has broken all of the logic with dates in my app and I had to move back to 3.0.1 at least for some time.

Previously
<ion-datetime [(ngModule)]="date">
would mean that “date” equals to a date in format “YYYY-MM-DD”, and now it equals to date in format:

{
      "year": 2017,
      "month": 4,
      "day": 27
    }

And 4th month now is May, so when I pass this object to moment.js I have to subtract 1 month all the time

2

That would be quite bad and unexpected.

If you look at https://github.com/driftyco/ionic/compare/v3.0.1...v3.1.0, then click “Files changed” and then search for “datetime” you see there really were some changes, but commit messages say “refactor” and similar. Shouldn’t really change functionality :confused:

4

The changelog doesn’t show any changes to datetime, but before writing here I’ve watched some commits and found one, where changes to datetime are applied. In my app there are 2 datetime pickers for check-in and check-out. Check-out is set automatically and check-in is set by ionic.

So here is what I get when I submit the form in Ionic 3.1.0:

"check_in": {
      "year": 2017,
      "month": 4,
      "day": 27
    },
"check_out": "2017-05-30",

And what I get from ionic 3.0.1:

"check_in": "2017-04-27",
"check_out": "2017-04-30",
5

Hey folks! Thanks for pointing this out. We’re looking into this.

6

Please please go back to using ISO strings. They are really the only reliable way of slinging dates around in JavaScript, and work seamlessly with date-fns.

7

Please read my comment on a related issue on ionic’s GitHub:

And yes, ISO strings were perfect.

8

I likes this chenge. But can’t set this.

<ion-datetime [(ngModule)]="date">
this.date = {
      "year": 2017,
       "month": 4,
      "day": 27
}

I can set this.(I use string strangely)

<ion-datetime [(ngModule)]="date">
this.date = "2017-04-20";

And In set Model. I get variable.
I changed datetime(use ion-datetime). variable is object.

{
      "year": 2017,
      "month": 4,
      "day": 27
}

I didn’t change. variable is string.

'2017-04-27'

I want one to standardize it.

9

The changes seem to be reverted in master branch so that a string is returned yet again:


and:

I used the nightly build and it seems to be working as before.

I.e. in package.json:

    "ionic-angular": "3.1.0-201704272149",
10

Could everyone please try out 3.1.1 and let me know if you are seeing any problems?

npm install --save --save-exact ionic-angular@3.1.1

Thank you! :slight_smile:

11

I tried out 3.1.1 but it still breaks my page:

RangeError: Invalid time value
    at Date.toISOString (<anonymous>)
    at DEventFormComponent.webpackJsonp.723.DEventFormComponent.patchStart (http://localhost:8100/build/19.main.js:162:87)
    at DEventFormComponent.webpackJsonp.723.DEventFormComponent.dayChanged (http://localhost:8100/build/19.main.js:158:14)
    at Object.eval [as handleEvent] (ng:///DEventFormModule/DEventFormComponent.ngfactory.js:1545:24)
    at handleEvent (http://localhost:8100/build/main.js:12158:138)
    at callWithDebugContext (http://localhost:8100/build/main.js:13366:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/main.js:12954:12)
    at dispatchEvent (http://localhost:8100/build/main.js:9133:21)
    at http://localhost:8100/build/main.js:10997:38
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:8100/build/main.js:4193:36)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/main.js:19195:16)
    at SafeSubscriber.next (http://localhost:8100/build/main.js:19144:22)
    at Subscriber._next (http://localhost:8100/build/main.js:19086:26)
    at Subscriber.next (http://localhost:8100/build/main.js:19050:18)
    at EventEmitter.Subject.next (http://localhost:8100/build/main.js:41303:25)
    at EventEmitter.emit (http://localhost:8100/build/main.js:4167:76)

I am just doing the following:

  patchStart(){
    this.form.patchValue({ start: this.dEvent.start.toISOString() });
  }

Before ionic 3.1.0 everything worked fine.

UPDATE:
I changed event.year.value to event.year, this seems to fix the first error but now if I pick a date I get this error:

RangeError: Maximum call stack size exceeded
    at isViewDebugError (http://localhost:8100/build/main.js:8982:14)
    at callWithDebugContext (http://localhost:8100/build/main.js:13373:13)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/main.js:12954:12)
    at dispatchEvent (http://localhost:8100/build/main.js:9133:21)
    at http://localhost:8100/build/main.js:10997:38
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:8100/build/main.js:4193:36)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/main.js:19195:16)
    at SafeSubscriber.next (http://localhost:8100/build/main.js:19144:22)
    at Subscriber._next (http://localhost:8100/build/main.js:19086:26)
    at Subscriber.next (http://localhost:8100/build/main.js:19050:18)
    at EventEmitter.Subject.next (http://localhost:8100/build/main.js:41303:25)
    at EventEmitter.emit (http://localhost:8100/build/main.js:4167:76)
    at TimeoutDebouncer.<anonymous> (http://localhost:8100/build/main.js:39357:33)
    at TimeoutDebouncer.schedule (http://localhost:8100/build/main.js:86890:18)
    at TimeoutDebouncer.debounce (http://localhost:8100/build/main.js:86882:14)
    at DateTime.BaseInput._fireIonChange (http://localhost:8100/build/main.js:39355:29)
12

Is this issue fixed? Or is there any work around?

13

My app is working pretty good with 3.1.1, thank you! :slight_smile:

14

3.1.1 works great! Thanks for the quick fix.

15

Works good! Really improved :grinning: