如何将格式化日期添加到primeng p-column?

时间:2017-10-18 15:26:57

标签: primeng

我有一个JSON对象的接口,其中包含Date列。显示的是自纪元以来的秒数。 我正在尝试格式化日期值,但我没有太多运气。

有人能指出我正确的方向,或许有一个例子吗?

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

我也试过这个,但它没有显示任何内容。

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

2 个答案:

答案 0 :(得分:1)

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

您也可以使用DatePipe

  

{{row.inspectionDate |日期: 'shortDate''}}

有关详细信息,请访问此link.

答案 1 :(得分:0)

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

这是解决方案。该行包含子实体,需要以这种方式解除反射。