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

Question

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 :

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.

Answer 1

I had the same problem with a time in my DB like "17:00" but I also wanted it to respect the locale so for 12 hour clock locale users it would show "5:00 PM" but for users in places that like a 24 hour clock, they would still get "17:00". This component is also standalone, following the latest Angular recommendation.

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

@Pipe({
  name: 'localeTime',
  standalone: true
})
export class LocaleTimePipe implements PipeTransform {

  transform(time: string | null | undefined, undefinedResponse: string = 'N/A', locale: string = 'default'): string {
    if (time === undefined || time === null || !(time.length >= 4) || !time.includes(':')) {
      return undefinedResponse;
    }

    // Assume input time is in HH:mm format
    const [hour, minute] = time.split(':');

    // Create a date object, the date doesn't matter
    const date = new Date();
    date.setHours(parseInt(hour, 10), parseInt(minute, 10), 0, 0);

    // Options to request a time string in the appropriate format
    const options: Intl.DateTimeFormatOptions = {
      hour: 'numeric',
      minute: 'numeric',
      //timeZoneName: 'short',
    };

    // Use the Intl object to format the time
    const formatter = new Intl.DateTimeFormat(locale, options);
    return formatter.format(date);
  }

}

Here's an example using it with defaults {{code?.validBeforeTime | localeTime}}, and another if you want to override what it displays if you pass it null/undefined/garbage and specify the locale manually {{code?.validAfterTime | localeTime:'NONE':'en-US'}}.

The Intl.DateTimeFormatOptions are useful if you want the timezone to display (it's commented out), or maybe you want to show seconds or fractions of a second- all that is easily done with those options.

Answer 2

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

In your html for example:

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

Hope this will help you!!

Answer 3

Yes you can convert the time from 24 hours to 12 hours format using moment library. You can create a custom pipe to achieve it. Refer the following youtube link it solves the similar issue.

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

Answer 4

You can try this, {{'1970-01-01 ' + start_time | date: 'h:mm:ss a'}}

Reason is input string should always be a valid date with a time

Answer 5

You can use mediumTime, this displays like '10:30:24 AM'

{{start_time|date:'mediumTime':'undefined':'en-US' }}

Answer 6

For future reference, using the default Angular pipe reference UPPERCASE HH.mm instead of 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

Answer 7

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' }
]

Answer 8

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>