ionic 2 ion-datetime ISO Format issue
Solution 1
convert it to ISO format before displaying
var date = new Date('2017-01-01').toISOString()
console.log(date)
Solution 2
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();
}
Solution 3
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 :)
Akash M
Updated on June 09, 2022Comments
-
Akash M almost 2 years
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
-
Akash M about 7 yearsBelow is as I tried and its not coming : leadDetailsUpdate={ appt_date: 'new Date('appt_date').toISOString()' };
-
Gaurav Chaudhary about 7 years@AkashM Just create a new date using appt_date and assign it to appt_date again
-
Akash M about 7 yearsIf 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 about 7 years@AkashM Please add the code where you are assigning value to appt_date as it is giving 'null' in your case
-
Gaurav Chaudhary about 7 years@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
-
Akash M about 7 yearsI am using Ionic 2, the code all I am using is in the above question. I made some changes in the back end now my Date format is coming as below from backend:
appt_date: "2017-01-01 00:00:00"
-
Gaurav Chaudhary about 7 years@AkashM your error implies that your appt_date variable you are passing to datetime is
null
. Please assign your backend value to this variable properly -
Akash M about 7 yearsI am using the same subscript name appt_date in front to display which is coming from back end. In console my backend value is coming as appt_date: "2017-01-01 00:00:00"