i have ionic code that load times for me but it make it 24 hours and i want it in 12 hours with AM or PM

i tried many things but not work

this is my code

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;

        }

Get date as string format, split to parts.

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

join

You must use pipe for reusability. Create new typescript pipe with below code

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);

   }

}

and in HTML use this pipe

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

thanks to all and i got the answer and here what i did for any one who need it

first install the moment

the i create pipe by : ionic g pipe MyPipe

then i add this code in the MyPipe file

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

  }

}

after that in app.mdoule.ts file you have to add MyPipe under the declarations and providers

and last things is in your code add this in .ts file in constructor

private MyPipe:MyPipe

and in .html file

it will be like this

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

MyPipe and my => you must change it by the name that you want when you generate the pipe