How to change time from 24 to 12 hour format in angular 5

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>

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

View Of database how the time is stored

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.

3 answers

  • answered 2018-05-16 05:46 v8 sagar

    With Pipe you can achive it you need to use hh for 12h and HH for 24h

    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>

  • answered 2018-05-16 07:36 Sanoj_V

    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}`
           }
       }
    

    In your html for example:

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

    Hope this will help you!!

  • answered 2018-05-16 09:40 FunkRehkitz

    You can use the Datepipe https://angular.io/api/common/DatePipe

    You can pass the Datepipe the locale parameter which determines how your date is displayed.

    e.g

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

    will display as 11:20 AM

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

    will display as 16.05.18, 11:20

    You could also set your localeid in the app-module.ts to get the behaviour

    app-module.ts

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