momentjs datetime format on frontend with angular

12.5k Views Asked by At

I'm using currently moment.js in my project. I want to remove "T" and +02:00. There must be a date and time only. But if I use the .format() method of moment.js I get the default datetime.

I want to format this datetime:

from ' 2022-02-11T04:20:13+02:00 ' to ' 2022-02-11 04:20:13 '

back

import * as moment from 'moment';

date_times: any;
constructor() {
this.date_times =  moment().format('YYYY-MM-DD HH:mm:ss');
}

front

 <ion-item>
  <ion-label>Select date & time</ion-label>
  <ion-datetime displayFormat="D MMM YYYY H:mm A" (ionChange)="showdate()" [(ngModel)]="date_times"></ion-datetime>
</ion-item>

{{date_times }}
1

There are 1 best solutions below

2
Kien Nguyen On BEST ANSWER

moment().format('YYYY-MM-DD HH:mm:ss') will give you the format you want but since you are using date_times as the ngModel of <ion-datetime> component, its value has been changed after you initialized the value in the constructor().

You can format date_times when you print it out by using Pipe like this:

my-datetime-format.pipe.ts:

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

@Pipe({
  name: 'myDateTimeFormat'
})
export class myDateTimeFormatPipe implements PipeTransform {
  transform(value: string): string {
    return moment(value).format('YYYY-MM-DD HH:mm:ss');
  }
}

In template:

{{ date_times | myDateTimeFormat }}