How does one add a formatted date to a primeng p-column?

Question

I have an interface for a JSON object that has Date columns in it. What gets displayed is the number of seconds since the epoch. I am trying to format the date values, but I am not having much luck.

Can someone point me in the right direction, perhaps with an example?

   <p-dataTable [value]="observations" [rows]="20" [paginator]="true" [responsive]=true selectionMode="single" [(selection)]="selectedObservation" (onRowSelect)="onRowSelect($event)">
    <p-header>List of Observations</p-header>
    <p-column field="id" header="ID" [sortable]="true" [style]="{'width': '100px'}"></p-column>
    <p-column field="description" header="Description" [sortable]="true"></p-column>
    <p-column field="citation.id" header="CitationID" [sortable]="true" [style]="{'width': '100px'}"></p-column>
    <p-column field="citation.citationShortDescription" header="Citation Short Description" [sortable]="true"></p-column>
    <p-column field="citation.citationDesc" header="Citation Desc" [sortable]="true"></p-column>
    <p-column field="citation.citationObservations" header="Citation Observations" [sortable]="true"></p-column>
    <p-column field="citation.dateCorrectionReceived" header="Date Correction Received" [sortable]="true"></p-column>

    <p-column field="citation.inspectionDate" header="Inspection Date" [sortable]="true">     
            <ng-template let-col let-row="rowData" pTemplate="body">
                {{row[col.value]}}
            </ng-template>              
    </p-column>

    <p-column field="citation.inspectionDate" header="Inspection Date" [sortable]="true"></p-column>
    <p-column field="citation.inspectionEndDate" header="Inspection End Date" [sortable]="true"></p-column>
    <p-column field="citation.cfrCiteLang" header="Cfr Cite Lang" [sortable]="true"></p-column>        
    <p-column field="correctionStatus.status" header="Correction Status" [sortable]="true"></p-column>
    <p-column field="citation.assignment.userId" header="Assigned To" [sortable]="true"></p-column>
    <p-column field="citation.assignment.dateAssigned" header="Date Assigned" [sortable]="true"></p-column>
    <p-column field="citation.assignment.percentInterstate" header="% Interstate" [sortable]="true"></p-column>
    <p-column field="citation.assignment.inspectionalResponsibilty" header="Inspectional Responsibilty" [sortable]="true"></p-column>
</p-dataTable>

    import { Citation } from './citation';
import { CorrectiveAction } from './corrective-action';
import { Operation } from './operation';
import { CorrectionStatus } from './correction-status';

export interface Observation {
    id: number;
    description: string;
    creatdBy: string;
    creatdDt: Date;
    mdfydBy: string;
    mdfydDt: Date; 
    citation: Citation;
    correctiveActions: Set<CorrectiveAction>;
    operation: Operation;
    correctionStatus: CorrectionStatus;
}
    import { RefCd } from './refcd';
import { Assignment } from './assignment';
import { Operation } from './operation';

export interface Citation {
    id: number;
    cfrCiteLang: string;
    citationDesc: string;
    issueDate: Date;
    citationShortDescription: string;
    citationObservations: string;
    dateCorrectionReceived: Date;
    inspectionEndDate: Date;
    inspectionDate: Date;
    creatdBy: string;
    creatdDt: Date;
    mdfydBy: string;
    mdfydDt: Date;  
    refcd: RefCd;
    assignment: Assignment;
    operation: Operation;
}

I also tried this, but it displays nothing.

        <p-column field="citation.inspectionDate" header="Inspection Date" [sortable]="true">     
            <ng-template let-row="rowData" pTemplate="body">
                {{row.inspectionDate | date}}
            </ng-template>              
    </p-column>

score 4 · Answer 1 · answered Dec 05 '17 at 17:21

<p-column field="citation.inspectionDate" header="Inspection Date" [sortable]="true">     
        <ng-template let-row="rowData" pTemplate="body">
            {{row.inspectionDate | date:'MM/dd/yyyy'}}
        </ng-template>              
</p-column>

you can also use DatePipe

{{row.inspectionDate | date:'shortDate''}}

For more information please visit this link.

score 0 · Answer 2 · answered Oct 19 '17 at 15:51

        <p-column field="citation.inspectionDate" header="Inspection Date" [sortable]="true">     
            <ng-template let-row="rowData" pTemplate="body">
                {{row.citation.inspectionDate | date}}
            </ng-template>              
    </p-column>

This was the solution. The row contains the child entities and it needed to be derefenced that way.

How does one add a formatted date to a primeng p-column?

2 Answers2