如何在角度5中将时间从24小时格式更改为12小时格式 [英] How to change time from 24 to 12 hour format in angular 5

问题描述

我在应用程序中使用输入类型time来接收时间:

I have used input type time in my application to receive time:

  <mat-input-container>
<input matInput  formControlName="start_time" type="time" placeholder="Time Start">
<p class="invalid-text" *ngIf="dvrForm.controls.start_time.invalid &&
        (dvrForm.controls.start_time.dirty || dvrForm.controls.start_time.touched)">
  <span *ngIf="dvrForm.controls.start_time.errors.required"> Start Time is required.</span></p>

在我通过输入存储数据之后，它以24小时格式存储:

And after i store data through input it gets stored in 24 hour format :

因此，现在当我在视图中显示它时，它会以相同的格式显示，例如:23:11:00，是否有可能使用类似管道的东西在视图中显示时将其转换为12小时格式.

So now when I display it in my view it gets displayed in the same format eg: 23:11:00 , is it possible to use something like pipes to convert it into 12 hr format while displaying in the view.

推荐答案

是的，您可以通过管道进行操作:

Yes, you can do it from pipe:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'convertFrom24To12Format'})
export class TimeFormat implements PipeTransform {
     transform(time: any): any {
         let hour = (time.split(':'))[0]
         let min = (time.split(':'))[1]
         let part = hour > 12 ? 'pm' : 'am';
         min = (min+'').length == 1 ? `0${min}` : min;
         hour = hour > 12 ? hour - 12 : hour;
         hour = (hour+'').length == 1 ? `0${hour}` : hour;
         return `${hour}:${min} ${part}`
       }
   }

例如，在您的html中:

In your html for example:

<p>Time Format From  24 to 12 : {{'23:11:00' | convertFrom24To12Format}}</p>

希望这对您有帮助！

这篇关于如何在角度5中将时间从24小时格式更改为12小时格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！