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

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

In order for the grid to format the date properly you need to convert it into a JS date. I usually do that in the callback from the ajax call retrieving the data from the server. Something like that:

api.get('some server url').then(function(data) {
  if (data.SomeDate) data.SomeDate = new Date(data.SomeDate);
});

(This is a pseudo code, don't use it directly)

This will allow you to format the date as:

field="SomeField" format='{0:d}

or

field="SomeField" format='{0:MM/dd/yyyy h:mm a}

Hope that helps.

Answer 3

You can format the date as below:

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

Answer 4

Working with a string in EF Core's format, ie. YYYY-MM-DDTHH:MM:SS, I was able to use this in the service to splice date formatting into the call (in this case read) which prepares the API data for grid consumption. The place where the work happens is in extractData which I pulled from this topic Angular 2 Date deserialization and retrofitted for my purposes. Hopefully it'll save someone the grief.

I should add, this is in the context of a service that's structured as an extended BehaviorSubject. This goes with Telerik's reactive form editing model:

private fetch(action: string = "", data?: ISomething[], guid?: string): Observable<ISomething[]> {

    let options = new RequestOptions();
    options.body = this.serializeModels(data);
    return this.http
        .get('api/controllername/controllerget', options)
        .map(response => response.json()).catch(this.handleError);
}


public read() {

    this.reset();

    if (this.data.length) {
        return super.next(this.data);
    }

    this.fetch()
        .do(data => this.data = data)

        .subscribe(data => {
            this.extractData(data)
            super.next(data);
        });
}

private extractData(data?: any) {
    data.forEach((d) => {
        d.datefieldname = new Date(d.datefieldname);
    });
    return data;
}