Kendo Angular 2 Grid DateTime format

问题:

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.

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

回答2:

You can format the date as below:

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

回答3:

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.

回答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;
}