Ionic-framework: [V4-beta.7] ion-datetime not bind as ISO-8601 format

[MrSparklle]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/Users/joeldaros/.nvm/versions/node/v8.11.3/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 7 other plugins)

System:

   ios-deploy : 2.0.0
   NodeJS     : v8.11.3 (/Users/joeldaros/.nvm/versions/node/v8.11.3/bin/node)
   npm        : 6.4.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4 Build version 9F1027a

Describe the Bug
The ion-datetime component do not bind his value to a ISO-8601 format when changed. It binds the date to a object:

{
  "dateBk": {
    "day": { "text": "21", "value": 21, "columnIndex": 0 },
    "month": { "text": "Aug", "value": 8, "columnIndex": 1 },
    "year": { "text": "2017", "value": 2017, "columnIndex": 2 }
  }
}

Example:
The initial date (ISO-8601) of component is correct:

When you pick another date from the component it binds to a object instead of a string in 8601 format like described in documentation:

Steps to Reproduce
Steps to reproduce the behavior:

1. Change the date from the ion-datetime component
2. Check the results.

Related Code

https://github.com/MrSparklle/Inc4

[shiyu123]

At present, my solution is

private _startDate: string;

get startDate() {
  return this._startDate;
}

set startDate(value: any) {
  if (typeof (value) !== 'string') {
    const { year, month, day, hour } = value,
      date = new Date(year.value, month.value - 1, day.value, hour.value);
    this._startDate = format(date, 'YYYY-MM-DDTHH:00:00');
  } else {
    this._startDate = value;
  }
 }

[ghenry22]

Also just hit this issue, docs all say that it reads and returns ISO format datetime as string. As it did in V3.

It should continue to do so or the documentation should be updated and this added as a breaking change.

[AppField]

I agree with @ghenry22
Especially since it's recommended using the date-fns library to work with dates. I can't find a simple way to create a new object with date-fns only using hours and minutes (since I use the datetime picker only for the time) to calculate a duration (or difference in minutes). Except (again) manually creating it.

[woodstream]

Also hit this issue, and I find a another bug that it can't select year with 2018

[MrSparklle]

@woodstream The 2018 year bug has been solved in beta-7, just upgrade your @ionic/angular

[MrSparklle]

@brandyscarney Please, promote this to Backlog for correction.

[Chethannp]

Any idea on when this will be fixed?

[ghenry22]

@kensodemann would be great to get this fixed, I am working on a project that uses the dateTime picker and I have been working around this on other things rather than building in work arounds left and right.

[kensodemann]

What I have done in one of my own projects until I can get this fixed is to not do the two-way binding on ngModel but to do the property binding on value and the event binding on ionChange (which is all the ngModel binding really does anyhow), and then if the evt.target.value is a string I use it, if it is an object I pull it apart to create a string.

Then I can easily swap that out once I get a fix in and it is released.

[MrSparklle]

This issue has been fixed in https://github.com/ionic-team/ionic/pull/15833 and https://github.com/ionic-team/ionic/pull/15907 released in (Beta-13).

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.