Menu
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.
951
Start Control Panel, and then under Clock, Language, and Region, click Change date, time or number formats. On the Formats tab, under Date and time formats, do one of the following: To change to 24-hour format, on the Short time drop-down list, select HH:mm and on the Long time drop-down list, select HH:mm:ss.
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!!
77
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
