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 from back end, the date value is not displaying in ion-datetime.

Below is my code:

update.html:

<ion-item class="border-bottom">
      <ion-label  class="ionselect" >Appointment Date:</ion-label>
      <ion-datetime name="appdate" displayFormat="YYYY MMM DD" [(ngModel)]="leadDetailsUpdate.appt_date"></ion-datetime>
</ion-item>

update.ts:

leadDetailsUpdate={
        appt_date:''
};

The Date format I am getting from back end as follows: appt_date: "2017-01-01"

Below is the error message I am getting in console:

Error parsing date: "null". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime

use toISOString() function to convert it to ISO before display it in ion date-time — Gaurav Chaudhary
– Gaurav Chaudhary, Commented Apr 12, 2017 at 5:44

Gaurav Chaudhary · Accepted Answer · 2017-04-12 05:46:00Z

16

convert it to ISO format before displaying

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

answered Apr 12, 2017 at 5:46

Gaurav Chaudhary

1,50115 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Akash M Over a year ago

Below is as I tried and its not coming : leadDetailsUpdate={ appt_date: 'new Date('appt_date').toISOString()' };

Gaurav Chaudhary Over a year ago

@AkashM Just create a new date using appt_date and assign it to appt_date again

Akash M Over a year ago

If I use like you said: var date = new Date('appt_date').toISOString(); console.log(date); in console its coming as: 2017-01-01T00:00:00.000Z

Gaurav Chaudhary Over a year ago

@AkashM Please add the code where you are assigning value to appt_date as it is giving 'null' in your case

Gaurav Chaudhary Over a year ago

@AkashM also I used your string and it is working fine on Ionic 2. Are you using Ionic 1 because there is no such issue on Ionic 2 as you mentioned

|

Carlos Roig · Accepted Answer · 2017-05-29 15:22:44Z

4

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();
}

answered May 29, 2017 at 15:22

Carlos Roig

413 bronze badges

Comments

Daniel Delgado · Accepted Answer · 2017-12-16 06:58:51Z

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:

Open console at root proyect and install moment: npm install moment --S.
Import moment in component file: import moment from 'moment';.
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 :)

Collectives™ on Stack Overflow

ionic 2 ion-datetime ISO Format issue

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related