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.

I'm not familiar with devexpress at all, but couldn't you perhaps use the [angular date pipe](https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html) for this: `[dataField]="receiptDate | date:'short'"`? — Michael Doye, May 18 '17 at 13:13
@und3rTow thank you for your input - unfortunately at this point the pipe is not valid - but I have found the solution meanwhile — marco birchler, May 18 '17 at 15:03

score 7 · Accepted Answer · answered May 18 '17 at 15:07

7

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>

answered May 18 '17 at 15:07

marco birchler

1,566
2
21
45

thank you, took so long to sort this out – cristian9804 Aug 26 '22 at 09:40

score 6 · Answer 2 · answered Jun 13 '17 at 00:33

The answer mentioned above works fine, if you want to use pipes ( may be for some addditional formatting or anything ) you can use cellTemplate , below is the code snippet

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

score 4 · Answer 3 · answered Feb 12 '20 at 19:25

once you modified dataType="date", then devexpress components are smart enough to catch format from your custom angular pipe if you passed as a format format="myFormatPipe .
or you can simply do this you can do this:

<dxi-column
  dataField="receiptDate"
  dataType="date"
  format="dd/MM/yyyy"
></dxi-column>

score 0 · Answer 4 · answered Sep 29 '20 at 11:29

0

It was showing 1 day before. Below changes worked for me format=dd-MM-yyyy" To [format]="{ type: 'dd-MM-yyyy' }"

answered Sep 29 '20 at 11:29

Shahid Hussain Abbasi

2,508
16
10

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

4 Answers4