将24小时转换为12小时

Question

我有为我加载时间的离子代码，但它使它加载24小时，而我希望在12个小时内使用AM或PM

我尝试了很多事情但没有用

这是我的代码

loadTimes() {
    this.availabilityTimes = new Array<Array<string>>();
    for(let i = 0; i < 7; i++){
        this.availabilityTimes.push(new Array<string>());
    }
    let date = new Date();
    for (let avail of this.availabilities) {
        let dateStart = new Date(date.getFullYear(), date.getMonth(), date.getDate(), Number(avail.start.split(':')[0]), Number(avail.start.split(':')[1]), 0);
        let dateEnd = new Date(date.getFullYear(), date.getMonth(), date.getDate(), Number(avail.end.split(':')[0]), Number(avail.end.split(':')[1]), 0);

        let availabilityTime = new Array<string>();
        let time: number = dateStart.getTime();
        while(time <= dateEnd.getTime()) {
            let dateIn = new Date(time);
            availabilityTime.push((dateIn.getHours()<10?('0'+dateIn.getHours()):String(dateIn.getHours())) +':'+ (dateIn.getMinutes()<10?('0'+dateIn.getMinutes()):String(dateIn.getMinutes())) +':00');
            time = time + 3600000;
        }

Answer 1

以字符串格式获取日期，分为几部分。

hours = hours % 12 + (hours < 13 ? ' AM' : ' PM');

加入

Answer 2

必须使用管道来实现可重用性。使用以下代码创建新的打字稿管道

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

@Pipe({
   name: 'dateTime'
})

export class DateTimePipe implements PipeTransform {
   transform(value: any, format: string = ''): string {
       // Try and parse the passed value.
       const momentDate = moment(value);

       // If moment didn't understand the value, return it unformatted.
       if (!momentDate.isValid()) return value;

       // Otherwise, return the date formatted as requested.
       return momentDate.format(format);
   }
}

在HTML中使用此管道

<td>{{YourDateField.Date |dateTime :'MM/DD/YYYY hh:mm:ss A'}}</td>

Answer 3

感谢所有人，我得到了答案，在这里，我为任何需要它的人做了

首先安装

我通过以下方法创建管道：ionic g pipe MyPipe

然后将这段代码添加到MyPipe文件中

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

/**
 * Generated class for the MyPipe pipe.
 *
 * See https://angular.io/docs/ts/latest/guide/pipes.html for more info on
 * Angular Pipes.
 */
@Pipe({
  name: 'my',
})
export class MyPipe implements PipeTransform {
  transform(time: any): any {
    let hour = (time.split(':'))[0]
    let min = (time.split(':'))[1]
    let part = 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}`
  }
}

然后在app.mdoule.ts文件中，您必须在声明和提供程序下添加MyPipe

最后，在代码中，将其添加到构造函数的.ts文件中

private MyPipe:MyPipe

和.html文件

会是这样

{{time |my: "hh:mm:ss"}}

MyPipe和my =>，您必须在生成管道时使用所需的名称对其进行更改