Clever Geek Handbook

Ionic 2nd day-time

I am using ion-datetime for my receive form. When pasted, it works fine without any problem. But when I need to update the appointment date form entered data from the back end, the date value is not displayed 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 get from the back is as follows:

appt_date: "2017-01-01"

Below is the error message I get in the console:

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

+3


source to share


3 answers


convert it to ISO format before displaying



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


+8


source


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

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 method, changeCheckOutStartTime()

I take time and create an instant:

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


source


Using ISO format before displaying, for example:

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

Will be different from the clock, each browser will do something different. In my case, I had a difference of 5 hours (16/12/17 02:00 - 16/12/17 07:00).

The best way would be to use the moment as ionic recommendations on its n documentation ( https://ionicframework.com/docs/api/components/datetime/DateTime/#advanced-datetime-validation-and-manipulation )

Example:

  • Open the console with root proyect and set the time: npm install moment --S

    .
  • Date of imports into the component file import moment from 'moment';

    .
  • Set the value of the model: this.myDate = moment().format()

    .

Your best bet would be to create a channel. Check out this demo http://plnkr.co/edit/MHjUdC for inspiration, goog luck :)

0


source






More articles:


All Articles