在 Typescript Angular 中格式化时间答案

【问题标题】：Format time in Typescript Angular在 Typescript Angular 中格式化时间
【发布时间】：2019-09-11 15:44:50
【问题描述】：

我想在我的FormArray 中迭代time，并且我正在以以下格式从 API 接收时间：

14.21.00

我想这样格式化这个时间：

2:21 PM

我正在尝试像这样使用 Angular DatePipe 进行格式化：

{{summon.value.summonTime | date :'shortTime' }}

但出现错误：

错误：InvalidPipeArgument：“无法将“14.21.00”转换为管道“DatePipe”的日期

这里我转载于stackblitz

根据我的研究，14.21.00 在 javascript/typescript 中不支持时间格式，如果有任何指导和建议来解决这个问题。

【问题讨论】：

如果只是格式化显示，你可以这样做：{{summon.value.summonTime.split('.').join(':')}}
但在使用DatePIpe时仍然报错
删除日期管道
我的错误，更新了我的问题

标签： javascript angular typescript time date-pipe

【解决方案1】：

试试这个（在你的 stackblitz 代码上测试过）：

time:{{'1990-10-10 '+ summon.value.summonTime.split('.').join(':') | date:'shortTime' }}

要使用“日期”管道，时间也必须跟在日期之后，所以我们可以传递任何日期来验证日期管道。例如，这有效：{{'1990-10-10 01:02:03' |日期：'shortTime'}}，这不起作用：{{'01:02:03' |日期：'shortTime'}}。

我也替换了“。” （点）按时使用“：”进行拆分和连接，以根据需要进行格式化。

【讨论】：

嗨，伙计，它似乎有效，你有什么解释吗？
是的，我已经用解释编辑了答案。气氛很好。

【解决方案2】：

希望你做得很好！！！

在您希望的文件夹中创建一个新管道。完成后，请在模块中提供详细信息（导入和声明）：-

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

@Pipe({
  name: 'dateTransformer'
})
export class DateTransformerPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value && value.length > 0 ? value.replace('.', ':') : value;
  }
}

完成后，在您的 sn-p 中更新此内容：-

<ng-container [formGroupName]="i">
  <input type="checkbox" formControlName="isChecked" />
  {{ summon.value.summonTime | dateTransformer }}
  item: {{ summon.value.itemNo }}
  <br />
  time:{{ summon.value.summonTime | dateTransformer }}
  <br />
</ng-container>

希望，我能够解决您的问题！快乐编码！干杯！！！

【讨论】：

【解决方案3】：

您可以使用ngx-moment，如下所示

{{summon.value.summonTime | amParse:'HH.mm.ss' | amDateFormat:'hh:mm a'}}

查看修改后的 stackblitz https://stackblitz.com/edit/angular-moment-pipe-2324234

【讨论】：

谢谢，但如果没有角库有什么办法吗？
您可以开发自己的管道，读取由. 分隔的值并将24 小时转换为12 小时，并添加上午/下午