web-dev-qa-db-ja.com

angular 5で24時間形式から12時間形式に時間を変更する方法

アプリケーションで入力タイプ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時間形式で保存されます：

View Of database how the time is stored

したがって、ビューに表示すると、同じ形式で表示されます。例：23:11:00、ビューに表示している間にパイプなどを使用して12時間形式に変換することは可能ですか。

angularangular5angular-pipe
4
Atul Stha

はい、あなたはパイプからそれを行うことができます：

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で：

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

これがあなたを助けることを願っています!!

9
Sanoj_V

パイプを使用すると、それを実現できます12時間にはhh、24時間にはHHを使用する必要があります

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>
3
v8-E