ionic 2 ion-datetime ISO Format issue

Question

I am using ion-datetime for my appointment form. While inserting it is working fine without any problem. But when I need to update the inserted appointment date form details

Answer 1

convert it to ISO format before displaying

var date = new Date('2017-01-01').toISOString()
console.log(date)

Answer 2

Using ISO format before displaying, like this:

this.myDate = new Date('2017-01-01').toISOString()

Will give us a difference of hours, each browser would do something different. In my case I had a difference of 5 hours (16/12/17 02:00 would be 16/12/17 07:00).

A better way would be to use moment as ionic recomends on its documentationn (https://ionicframework.com/docs/api/components/datetime/DateTime/#advanced-datetime-validation-and-manipulation)

Example:

1. Open console at root proyect and install moment: npm install moment --S.
2. Import moment in component file: import moment from 'moment';.
3. Set value of model variable: this.myDate = moment().format().

The best would be create a pipe. Well check this demo http://plnkr.co/edit/MHjUdC for inspiration, goog luck :)

Answer 3

Even Gaurav is right, I found that if your timezone is not +0, you can have problems with that. I found somewhere this solution:

let tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
this.startTime = (new Date(this.myStartTime - tzoffset)).toISOString().slice(0,-1);

Then in my HTML I have it like this:

<ion-datetime displayFormat="HH:mm" [(ngModel)]="startTime" (ionChange)="changeCheckOutStartTime()" style="padding-left: 21px"></ion-datetime>

And in the changeCheckOutStartTime() method, I take the time and create a moment:

changeCheckOutStartTime() {
   this.myStartTime = moment(this.startTime).toDate();
}