Autocomplete unable to display the date

2 posts, 1 answers
  1. Mark
    Mark avatar
    8 posts
    Member since:
    Oct 2012

    Posted 22 Nov 2012 Link to this post

    I would like to display both description and Date in my kendo auto complete. THe following code will display as expected except the date. The date is displaying weird format 

    if i type Nike

    xml schmea
    <d:SDate  m:type="Edm.DateTime">2012-11-21T18:30:51.097</d:SDate>
    it will come up Nike (/Date(13534560000)/)    

                    minLength: 3,
                    dataTextField: "SDesc",
                    dataValueField: "RefID",
                    template: '${ data.SDesc } ' + '(' + '<span>${ data.SDate }</span>' + ')',
                    dataSource: {
                        type: "odata",
                        serverFiltering: true,
                        serverPaging: true,
                        pageSize: 20,
                        transport: {
                            read: "http://localhost:54329/HH_WcfDataService.svc/Product"
  2. Answer
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 30 Nov 2012 Link to this post

    Hi Mark!

    This is a long standing issue with ASP.NET.  Check out this SO thread.

    You can handle it two ways in Kendo UI.  The first way is to parse the date in you template per this thread response from Rosen
    template: '${ data.SDesc } ' + '(' + '<span>${ kendo.toString(new Date(parseInt(data.SDate.replace(/[A-Za-z$--/]/g, ""))),"MMMM dd yyyy") }</span>' + ')',
    You can also do it in the parse method on the dataSource if you want to keep your template cleaner...
    // other data source code omitted for berevity
    transport: {
      read: "http://localhost:54329/HH_WcfDataService.svc/Product"
    schema: {
      parse: function(data) {
        // loop through the data and format the SDate field
        $.each(data, function() {
          this.SDate = kendo.toString(new Date(parseInt(this.SDate.replace(/[A-Za-z$--/]/g, ""))),"MMMM dd yyyy");
        // return the data back
        return data;
Back to Top