javascriptangularionic4datetimepickerangular-moment

momentjs datetime format on frontend with angular


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

Solution

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