5

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.

BriDev
  • 143
  • 1
  • 2
  • 9
  • have you tried using the column template? it works fine if you do – mast3rd3mon Apr 11 '17 at 07:42
  • No, I havn't templated it.... I can do that. It also works if I simply convert to a string on the server when I get the data. I just noticed that it "should" automatically parse / accept a datetime as a valid format from the passed array of data when it is bound. – BriDev Apr 12 '17 at 12:35
  • from what i know, theres no datetime filter, i just use the template as its easier, need an example? – mast3rd3mon Apr 12 '17 at 13:02
  • No, I can do that too... was just curious about how the grid translates the raw DateTime. A template does make sense and should work well. Since I originally posted this, I just started parsing the dates on the server, so it's not a big deal (I sort on the server as well, so that is ok). Typically if you client sort your data you would want it as a date rather than a string for sorting purposes. Thanks for the replies! – BriDev Apr 12 '17 at 15:54
  • The grid doesn't translate the raw data. It works with the already provided data array. If there are Dates in it, great, it will be able to format it accordingly. If the date fields are just strings (this is how they are serialized), the grid will do nothing. The reason is simple, there is no information which string is date and which not. I will suggest you just convert the date strings into proper Date objects before feeding the grid. – George K Apr 13 '17 at 07:35

4 Answers4

8

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

cmartin
  • 2,819
  • 1
  • 26
  • 31
  • the problem with this solution is that the user cannot sort the grid column by date if the date format is MM/DD/YYYY. – ps0604 Sep 25 '18 at 02:11
6

You can format the date as below:

<kendo-grid-column field="createdOn" format='{0:MM/dd/yyyy HH:mm:ss}'>
</kendo-grid-column>
Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
isajja
  • 69
  • 1
4

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.

dpdragnev
  • 2,011
  • 2
  • 28
  • 55
  • Would you be able to format the date using a property? So, e.g.: format='{0:foo.DateFormat}' – Maniac_1979 May 11 '17 at 14:18
  • Reason for asking is that I would like to have my column date format definition in a config file instead of in the column definition. In this way you would only have to modify it once. – Maniac_1979 May 12 '17 at 06:45
  • If intrested, check out this one: http://stackoverflow.com/questions/43931968/format-kendo-ui-angular2-grid-date-column-using-property/43933227#43933227 – Maniac_1979 May 12 '17 at 08:44
2

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;
}
carbon1479
  • 190
  • 1
  • 6