angular - Angular 6 how to I edit date format?

Question

        <ng-container *ngFor="let column of columns">
      <ng-container *ngIf="column.isModelProperty" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{{ column.name }}</span>
          {{ row[column.property] }}
        </mat-cell>
      </ng-container>
    </ng-container>

export class Senderv2 {
    serviceCode: string;
    insertDate : DatePipe;

    constructor(senderv2) {
        this.serviceCode = senderv2.serviceCode;
        this.insertDate = senderv2.insertDate;
    }
}

export class ListColumn {
  name?: string;
  property?: string;
  visible?: boolean;
  isModelProperty?: boolean;
  displayFn: any;
}

The data comes from the database to the table. Data type datetime in the database Column property insertDate how to I edit date format?

do you mean edit the date itself in the DB? Or display the date in a custom format at template? — Vojtech, Nov 22 '18 at 21:54
@Vojtech I want display the date in a custom format at template (mat-table) column insertDate — Cdc, Nov 22 '18 at 21:57

KShewengger · Accepted Answer · 2019-07-15T14:04:54.953

1

You can edit you date in a custom format by using Angular's DatePipe.

Have attached a Stackblitz Demo for your reference

Sample Illustration:

import { DatePipe } from '@angular/common';


class Sender {

     currentDate: any = new Date();    

     constructor(private datePipe: DatePipe) {}   // Be sure to import this as a provider either inside Component or on your Module

     transformDate() {
         this.currentDate = this.datePipe.transform(this.currentDate, 'yyyy-MM-dd');  // 2018-11-23
     }

}

you can also refer to this answer for more information about implementing DatePipe

edited Jul 15 '19 at 14:04

answered Nov 23 '18 at 00:27

KShewengger

7,853
3
24
36

1

Thank you very much. I solved. constructor(senderv2, datePipe: DatePipe) { this.insertDate = datePipe.transform(senderv2.insertDate, 'dd-MM-yyyy'); } – Cdc Nov 23 '18 at 07:02
How can you do this? datePipe.transform returns a string, not a date, it should be giving you assignment error – Usr Jul 15 '19 at 13:09
1

@Dseaster Hi, have attached a working Stackblitz demo for your reference :) – KShewengger Jul 15 '19 at 14:05

angular - Angular 6 how to I edit date format?

1 Answers1