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 for this: [dataField]="receiptDate | date:'short'"? — Michael Doye
– Michael Doye, Commented May 18, 2017 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
– marco birchler, Commented May 18, 2017 at 15:03

marco birchler · Accepted Answer · 2017-05-18 15:07:40Z

10

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, 2017 at 15:07

marco birchler

1,7862 gold badges27 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pritesh agrawal · Accepted Answer · 2017-06-13 00:33:45Z

9

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>

answered Jun 13, 2017 at 0:33

pritesh agrawal

1,2259 silver badges16 bronze badges

Comments

Muhammed Moussa · Accepted Answer · 2020-02-12 19:25:31Z

5

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>

answered Feb 12, 2020 at 19:25

Muhammed Moussa

5,2471 gold badge39 silver badges29 bronze badges

Comments

VVD · Accepted Answer · 2024-06-27 09:35:58Z

1

Going the extra mile:

In case you want the filtering (search) input in your DevExpress grid to match the format specified in the format option of a dxi-column with a dataType of "date", you can use the useMaskBehavior option.

HTML Example:

<dxi-column dataField="dateTime" dataType="date" format="dd/MM/yyyy"
           caption="Date"
           [allowEditing]="false"
           [editorOptions]="{ useMaskBehavior: true }">
</dxi-column>

answered Jun 27, 2024 at 9:35

VVD

5335 silver badges12 bronze badges

Comments

Shahid Hussain Abbasi · Accepted Answer · 2020-09-29 11:29:07Z

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, 2020 at 11:29

Shahid Hussain Abbasi

2,69219 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related