如何在 Ionic 3 中以 HH:MM 格式显示时间

Question

我从 API 获取时间，格式为 13:45:56，我想将其显示为 13:45(HH:MM) 。谁能帮我？我尝试将 Date 管道与绑定标记一起使用，但它会抛出错误

 InvalidPipeArgument: '23:00:00' for pipe 'DatePipe'

Answer 1

HH - 小时，24 小时制，前导零 00 ... 23 h - 小时，12 小时制 1 ... 12 hh - 小时，12 小时制，前导零 01 ... 12

m - 第 1 分钟 ... 59 mm - 分钟，前导零 01 ... 59

所以你可以简单地写成HH:mm

EX: <ion-datetime display-format="HH:mm"></ion-datetime>

Answer 2

Angular 的 DatePipe 期望日期符合 docs:

....a Date object, a number (milliseconds since UTC epoch), or an ISO string.

因此，如果您想通过 Angular 格式化时间，则需要将时间从 API 转换为其中之一。

顺便说一句，是不是只能删除从 API 获得的时间字符串的第二部分？

Answer 3

您也可以通过以下方式绑定：

<span class="dt-time">{{ entity.created_at | utcTimeConversion: utcOffset : "MMM DD YYYY"}}</span>

这里我还考虑了 UTC 偏移量和格式，这将确保移动设备根据设备的时区转换时间..

干杯！

Answer 4

我已经为您的解决方案创建了一个 stackblitz。这个项目可能对你有帮助。

Answer 5

谢谢大家的宝贵意见。感谢您的努力。我用管子修好了。它看起来有点复杂，但对于应用于多个查询非常有用。使用

在此处添加管道查询

datepipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'datepipe' })
export class DateSet implements PipeTransform {
  transform(timeString: string ) {
    let time;
    time = timeString.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [timeString];
    if (time.length > 1) { // If time format correct
      time = time.slice (1);  // Remove full string match value
      time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
      time[3] = ' ';
      time[4] = ' ';
      time[0] = +time[0] % 12 || 12; // Adjust hours
    }
    return time.join ('');
  }
}

如何在 Ionic 3 中以 HH:MM 格式显示时间

How to display time in HH:MM format in Ionic 3

ionic-framework

ionic3

angular

datepipe.ts