ios - 格式化日期后,角度日期管道在 iphone/ios 上显示 NaN
问题描述
我正在 angular 8 / ionic 5 上制作 PWA。用户可以创建事件并将它们列在提要页面上。问题是,每个事件的 thedate
和 thetime
都不会显示,并在 iphone/iOS 设备上给出错误“NaN”。两者date
并time
从中获取start_at
时间信息,格式为“hh:mm:ss”。
以下代码显示了我们如何从 MySQL php laravel 服务器接收响应数据以列出事件:
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);
});
}
在这里,您可以看到属性date
和time
正在为 formatAMPM() 函数获取并更改为 AM/PM 日期格式。
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;
}
在这里,最终日期字符串显示在管道字段中,它在 ios 上显示“NaN”错误。错误本身说:
ERROR 错误:InvalidPipeArgument:'无法将管道'Re'的“2021-05-19 17:15:38”转换为日期'。
'Re' 是什么意思顺便说一句?
<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>
希望你能帮我解决这个问题,因为这让我最近很头疼......提前谢谢!
解决方案
好的,我已经通过添加这行代码来修复它:
d = d.replace(" ", "T");
日期的格式类似于dd-MM-yyyy HH:mm:ss
,我需要添加“T”,所以就像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;
}
推荐阅读
- c# - 标准输出不打印每一行的日期和时间
- reactjs - 重用套接字连接,同时避免过时的 React 钩子关闭
- r - 从单个变量绘制水平灰度图的概率
- firebase - Firebase minInstances 被忽略
- c# - 试图在我的控制器上添加选择按钮以打开暂停菜单
- amazon-web-services - 如何等待 AWS ElasticBeanstalk 在 CI/CD 期间完成环境更新?
- python - Sublime 在输入时不显示模块内方法的建议
- python - 如何修复 TypeError: unhashable type: 'list'?
- c# - 为什么在 ASP.NET 中有些属性为 null 而有些则不使用 get 方法?
- bash - sed -n 命令或变量替换