如何以角度 5 将时间从 24 小时格式更改为 12 小时格式答案

【问题标题】：How to change time from 24 to 12 hour format in angular 5如何以角度 5 将时间从 24 小时格式更改为 12 小时格式
【发布时间】：2018-10-26 00:49:23
【问题描述】：

我在我的应用程序中使用了输入类型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 小时格式存储：

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

【问题讨论】：

有管道可以将整个时间戳转换为某些格式，而不是专门为 IMO 的时间

标签： angular angular5 angular-pipe

【解决方案1】：

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

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';
         if(parseInt(hour) == 0)
          hour = 12;
         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 中：

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

希望对你有帮助！！

【讨论】：

不应该是let part = hour > 12 ? 'pm' : 'am' 是let part = hour >= 12 ? 'pm' : 'am'
有没有办法从系统语言环境中获取时间格式？
那么恢复解决方案呢？从 12 到 24 格式

【解决方案2】：

使用 Pipe 您可以实现它，您需要将 hh 用于 12 小时，将 HH 用于 24 小时

var value = element(by.binding('example.value | date: "HH:mm:ss"'));
    var valid = element(by.binding('myForm.input.$valid'));

    function setInput(val) {
      var scr = "var ipt = document.getElementById('exampleInput'); " +
      "ipt.value = '" + val + "';" +
      "angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('" + val + "'); });";
      browser.executeScript(scr);
    }

<script src="//code.angularjs.org/1.7.0/angular.min.js"></script>
    <body ng-app="timeExample">
      <script>
     angular.module('timeExample', [])
       .controller('DateController', ['$scope', function($scope) {
         $scope.example = {
           value: new Date()
         };
       }]);
    </script>
    <form name="myForm" ng-controller="DateController as dateCtrl">
       <label for="exampleInput">Pick a time and Change AM to PM</label>
       <input type="time" id="exampleInput" name="input" ng-model="example.value"
           placeholder="HH:mm:ss"  required /><br/>
       <tt>value in 12H = {{example.value | date: "hh:mm:ss"}}</tt><br/>
       
       <tt>value 24H = {{example.value | date: "HH:mm:ss"}}</tt>

    </form>
    </body>

【讨论】：

我没有收到时间戳格式的值，正如我提到的，我收到的时间格式为11:11:00，因此我收到错误DvrListComponent.html:40 ERROR Error: InvalidPipeArgument: '11:11:00' for pipe 'DatePipe'
'11:11:00' 不是时间戳，它是一个字符串。如果您必须开始处理时区，则字符串是不够的。用 HH 而不是 hh 转换时间戳应该是要走的路。

【解决方案3】：

为了将来的参考，使用默认的 Angular 管道参考 UPPERCASE HH.mm 而不是 hh.mm

today: Date = new Date('2020-12-12T18:00');

<div> {{ today | date : 'hh.mm' }}</div>
// 06.00
<div>{{ today | date : 'HH.mm' }}</div>
// 18.00

【讨论】：

这是最简单的答案

【解决方案4】：

您可以使用 mediumTime，这显示为 '10:30:24 AM'

【讨论】：

【解决方案5】：

你可以试试这个， {{'1970-01-01' + 开始时间 |日期：'h:mm:ss a'}}

原因是输入字符串应该始终是带时间的有效日期

【讨论】：

【解决方案6】：

是的，您可以使用矩库将时间从 24 小时转换为 12 小时格式。您可以创建自定义管道来实现它。请参阅以下 youtube 链接它解决了类似的问题。

https://www.youtube.com/watch?v=vKE1d9o_Kmk

【讨论】：

不建议使用 moment。 'Moment.js 是一个遗留项目，现在处于维护模式。在大多数情况下，您应该选择不同的库。 github.com/moment/moment
@LarsRødal，是的，我知道，Moment.js 团队也宣布“_它没有死，但它确实完成了。_”。这意味着，他们将解决任何严重的问题，但新功能或更改不在讨论范围内。所以我看不出有任何理由拒绝投票这个答案。并且绝对可以在我们的项目中使用现有的功能，直到它被宣布为正式死亡。

【解决方案7】：

您可以使用日期管道https://angular.io/api/common/DatePipe

您可以将决定日期显示方式的区域参数传递给 Datepipe。

例如

{{this.testDate | date:'short':'undefined':'en-US'}}

将显示为上午 11:20

{{this.testDate | date:'short':'undefined':'de-GER'}}

将显示为 16.05.18 11:20

您还可以在 app-module.ts 中设置您的 localeid 以获取行为

应用模块.ts

import localeEnGb from '@angular/common/locales/en-GB'
registerLocaleData(localeEnGb );
...
  providers: [
    { provide: LOCALE_ID, useValue: 'en-GB' }
]

【讨论】：

【解决方案8】：

试试这个管道

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

@Pipe({
  name: 'dateConvert'
})
export class DateConvertPipe implements PipeTransform {

  transform(d: string): string {
    const date = new Date(d);
    date.toLocaleString('fr-FR', {
      hour: 'numeric',
      hour12: true
    });
    const monthNames = [
      'Janv', 'Févr', 'Mars',
      'Avr', 'Mai', 'Juin', 'Juill',
      'août', 'Sep', 'Oct',
      'Nov', 'Dec'
    ];
    const day = date.getUTCDay();
    const monthIndex = date.getMonth();
    const year = date.getFullYear();
    const hours = date.getHours();
    const min = date.getMinutes();
    const sec = date.getSeconds();
    return day + ' ' + monthNames[monthIndex] + ' ' + year + ' ' + hours + ':' + min + ':' + sec;
  }

}

<span>{{ s.subscriptionDate | dateConvert}}</span>

【讨论】：