Set the format of a date column in devextreme DataGrid with angular 2
I have a devextreme datagrid working in my angular2 project. However a column with a date datatype just shows the full javascript date in this format: yyyy-MM-ddTHH:mm:ss. I would like to set the format for this column to something more user friendly like dd.MM.yyyy (european style).
But all my attempts to set the format of the date were not successful until now.
Below is what I have in the component template until now:
<dx-data-grid [dataSource]="tasks">
<dxi-column dataField="barcode" ></dxi-column>
<dxi-column dataField="receiptDate" format="shortDate">
<dxo-format type="shortDate"></dxo-format>
</dxi-column>
</dx-data-grid>
Unfortunately setting the type of the format doesn't change anything at all - I still get this unformated JS date string. And I also don't get any exception in the console.
上面提到的答案工作正常，如果你想使用管道（可能是一些额外的格式或任何东西），你可以使用cellTemplate，下面是代码片段
<dx-data-grid [dataSource]="assessments" [height]="gridHeight" [hoverStateEnabled]="true"
width="100%">
<dxi-column dataField="assessDate" dataType="date" [caption]="assessDate" cellTemplate="dateCell"></dxi-column>
<div *dxTemplate="let cellData of 'dateCell'">
{{cellData.value | date: 'dd-MMM-yy'}}
</div>
</dx-data-grid>
I found the answer myself after a while. The problem is that you must set the dataType property of the column to date - otherwise the date formating setting will be ignored. This is working:
<dx-data-grid [dataSource]="tasks">
<dxi-column dataField="barcode" ></dxi-column>
<dxi-column dataField="receiptDate" dataType="date" format="shortDate"></dxi-column>
</dx-data-grid>
上一篇: Devextreme级联查找