Angular date pipe shows NaN on iphone/ios after formatting date - ios

Question

I'm making a PWA on angular 8 / ionic 5. Users can create events and have them listed on a feed page. Problem is, that the date and the time of each event does not get displayed and gives the error "NaN" on iphones/iOS devices. Both date and time get their information from start_at which is the time in the format of "hh:mm:ss".
Following code shows how we receive the response data from our MySQL php laravel server for listing the events:
getTodos() {
console.log("arrived to gettodos");
var id = this.userInfo.id
this.todoService.getTodos('', '', '', id, false).subscribe(res => {
console.log("res", res);
console.log("frimes", res['frimes']);
// debugger;
// console.log(res);
if (res['code'] === 200) {
// console.log(res['data']);
const userFrimes: any[] = res['frimes'];
this.todos = [] as any[];
console.log(userFrimes);
if (userFrimes && userFrimes.length > 0) {
userFrimes.forEach(uf => {
var timeofFrime = this.formatAMPM(uf.start_at);
if (!this.todoService.isFrimeExpired(uf.start_at)) {
this.todos.push({
owner: this.userInfo.username,
title: uf.title,
message: uf.description,
date: uf.start_at,
time: timeofFrime,
max: uf.max,
guests: uf.member.length, //uf.guests == null ? 0 : uf.guests,
frime_id: uf.id,
status: uf.status,
user_id: uf.user_id
});
}
});
}
} else if (res['code'] === 205) {
} else if (res['code'] === 401) {
}
}, err => {
//this.errorMessage = err.message;
console.log(err);
});
}
here you can see that the properties date and time are being fetched for the formatAMPM() function and changed to the AM/PM date format.
formatAMPM(d) {
let dd = d + " UTC";
let date = new Date(dd);
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
var min = minutes < 10 ? '0' + minutes : minutes;
var strTime = hours + ':' + min + ' ' + ampm;
return strTime;
}
here the final date string gets displayed in the pipe fields where it shows the "NaN" error on ios.
the error itself says:
ERROR Error: InvalidPipeArgument: 'Unable to convert "2021-05-19 17:15:38" into a date' for pipe 'Re'.
what does 'Re' mean btw?
<ion-col size="3" class="date-wrapper">
<h3 class="notification-date">
{{ item.date | date: "shortDate" }}
</h3>
<h3 class="notification-date">
{{ item.time | date: "HH:mm" }}
</h3>
<h3 class="notification-date">{{ item.guests + '/' + item.max }}</h3>
</ion-col>
hope you can help me fixing this, because this is giving me soooo many headachse lately...
thanks in advance!

Answer 1

ok i have fixed it by adding this line of code:
d = d.replace(" ", "T");
the date came in a format like dd-MM-yyyy HH:mm:ss and i needed to add the "T" so it is like dd-MM-yyyyTHH:mm:ss
formatAMPM(d) {
d = d.replace(" ", "T");
let dd = d + " UTC";
let date = new Date(dd);
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
var min = minutes < 10 ? '0' + minutes : minutes;
var strTime = hours + ':' + min + ' ' + ampm;
return strTime;
}