Kendo Angular 2 Grid DateTime format

Question

Does anyone know how to properly format a DateTime in the grid? (Is this datatype even supported?).

No matter what I put in the "filter" property of the column, my date doesn't seem to get parsed.

I see this value displayed: /Date(1480643052457)/

Any help or suggestions greatly appreciated!

---- Updated ----

Just as a quick update on what I ended up doing: I simply created a second string column and returned a formatted date string (that I format at the point of retrieval). Then when I sort, I just make sure to use the actual DateTime column, instead of the display column so that it sorts properly. This works fine for my needs. I think originally when I started working with the Angular 2 grid, I was expecting more client side functionality off of the grid (in terms of sorting, etc), but it's not really needed as much once you properly bind to a backend api source.

Answer 1

I solved the same issue using a date pipe in a template column. Make sure you check for null values.

<kendo-grid-column title="Last Login" width="100">
    <ng-template kendoGridCellTemplate let-dataItem>
        <div *ngIf="dataItem.lastLoginDate!=null">{{ formatDate(dataItem.lastLoginDate) | date:"shortDate" }}</div>
    </ng-template>
</kendo-grid-column>

function in component.ts pulls out the usable part of the date string and converts it to a JS date so the Date Pipe can use it.

formatDate(myStringDate) {
    return new Date(parseInt(myStringDate.substr(6)));
}

I used the shortDate format, but you can find more format options here including time formats: Angular 2 Date Pipe Formatters

Answer 2

You can format the date as below:

<kendo-grid-column field="createdOn" format='{0:MM/dd/yyyy HH:mm:ss}'>
</kendo-grid-column>