In the process of developing my ionic app (v-4), I encountered an issue with displaying the date from the api. The structure of my JSON data is as follows:
{
user_name: "Jhon"
status: "Open"
meeting_date: "31-08-2019"
remark: "No remarks"
request_id: 958
}
I attempted to showcase the date using <ion-datetime> in the following manner:
HTML
<form [formGroup]="editForm">
<ion-item>
<ion-label position="stacked">Date</ion-label>
<ion-datetime formControlName="meeting_date" [(ngModel)]="resObj.meetingDate"></ion-datetime>
</ion-item>
</form>
TS
public resObj;
ngOnInit() {
this.resObj = this.navParams.data.paramRequest;
this.updateForm = this.fb.group({
remark : [null],
.
.
meeting_date: [null],
});
}
An error occurred stating: Error parsing date: "undefined". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime
I attempted a solution by referencing ionic 2 ion-datetime ISO Format issue
This involved using the ISO format before displaying the date in the template like so:
HTML
<form [formGroup]="editForm">
<ion-item>
<ion-label position="stacked">Date</ion-label>
<ion-datetime formControlName="meeting_date" [(ngModel)]="meetingDate "></ion-datetime>
</ion-item>
</form>
TS
public resObj;
ngOnInit() {
this.resObj = this.navParams.data.paramRequest;
const meetingDate = this.resObj.meeting_date.toISOString(); <======
this.updateForm = this.fb.group({
remark : [null],
.
.
meeting_date: [null],
});
}
Despite these efforts, the date still does not display properly in ion-datetime
I'm having trouble pinpointing what may have caused this issue.