Set the format of a date column in devextreme DataGrid with angular 2

Question

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.

Answer 1

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>