如何在 angular 5 中将时间从 24 小时格式更改为 12 小时格式
How to change time from 24 to 12 hour format in angular 5
我在我的应用程序中使用了输入类型 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 小时格式。
使用 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>
是的,您可以通过管道执行此操作:
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>
希望对您有所帮助!!
您可以使用 Datepipe https://angular.io/api/common/DatePipe
您可以向 Datepipe 传递确定日期显示方式的语言环境参数。
例如
{{this.testDate | date:'short':'undefined':'en-US'}}
将显示为
11:20上午
{{this.testDate | date:'short':'undefined':'de-GER'}}
将显示为
2018 年 5 月 16 日,11:20
您还可以在应用程序中设置您的语言环境 ID-module.ts 以获得行为
应用-module.ts
import localeEnGb from '@angular/common/locales/en-GB'
registerLocaleData(localeEnGb );
...
providers: [
{ provide: LOCALE_ID, useValue: 'en-GB' }
]
试试这个烟斗
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>
为了将来参考,使用默认的 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
您可以使用 mediumTime,它显示为“上午 10:30:24”
{{start_time|日期:'mediumTime':'undefined':'en-US' }}
你可以试试这个,
{{'1970-01-01' + start_time |日期:'h:mm:ss a'}}
原因是输入字符串应始终是带时间的有效日期
是的,您可以使用 moment 库将时间从 24 小时格式转换为 12 小时格式。您可以创建自定义管道来实现它。参考以下 youtube link 它解决了类似的问题。
我在我的应用程序中使用了输入类型 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 小时格式。
使用 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>
是的,您可以通过管道执行此操作:
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>
希望对您有所帮助!!
您可以使用 Datepipe https://angular.io/api/common/DatePipe
您可以向 Datepipe 传递确定日期显示方式的语言环境参数。
例如
{{this.testDate | date:'short':'undefined':'en-US'}}
将显示为 11:20上午
{{this.testDate | date:'short':'undefined':'de-GER'}}
将显示为 2018 年 5 月 16 日,11:20
您还可以在应用程序中设置您的语言环境 ID-module.ts 以获得行为
应用-module.ts
import localeEnGb from '@angular/common/locales/en-GB'
registerLocaleData(localeEnGb );
...
providers: [
{ provide: LOCALE_ID, useValue: 'en-GB' }
]
试试这个烟斗
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>
为了将来参考,使用默认的 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
您可以使用 mediumTime,它显示为“上午 10:30:24”
{{start_time|日期:'mediumTime':'undefined':'en-US' }}
你可以试试这个, {{'1970-01-01' + start_time |日期:'h:mm:ss a'}}
原因是输入字符串应始终是带时间的有效日期
是的,您可以使用 moment 库将时间从 24 小时格式转换为 12 小时格式。您可以创建自定义管道来实现它。参考以下 youtube link 它解决了类似的问题。