Format Date in Grid

5 Answers 12755 Views
Date/Time Pickers
christina
Top achievements
Rank 1
christina asked on 27 Feb 2012, 04:15 PM
Hi,
I'm using kendoGrid to display my data, I am also using the regex function provided in on of the examples of the demos page.
 var dateRegExp = /^\/Date\((.*?)\)\/$/;
 
	oper.toDate = function toDate(value) {
	    var date = dateRegExp.exec(value);
	    return new Date(parseInt(date[1]));
	}

I then call the toDate function in my grid:
                {
                    field: "EndDate",
                    title: "End Date",
                    template: '#= kendo.toString(oper.toDate(EndDate), "MM/dd/yyyy" ) #'
                },

It renders fine, but it is actually displaying one day behind the correct day. For example:
it will display 2/6/2012, but the actual date is 2/7/2012.

Any suggestions??

Thanks!
Wannes
Top achievements
Rank 1
commented on 28 Mar 2012, 11:21 AM

Hello everyone,

I'm seeing the same result here. What appears to be happening is that the timezone is subtracted from the day. E.g.:
You select the date 30th of March 2012. When you call the value() function it returns the date:
Fri Mar 30 2012 00:00:00 GMT+0200 (Romance Daylight Time)

However, when you serialize that date using kendo.stringify(), then this is the result:
2012-03-29T22:00:00.000Z

As you can see: the timezone modifier +2h is subtracted from the 00h00, resulting in the 29th of March, 10:00PM.
Hopefully this bug will be fixed soon. In the meantime, the timezone can be added manually as a work-around...

Best Regards,
Wannes.
Wannes
Top achievements
Rank 1
commented on 28 Mar 2012, 01:03 PM

After several more tests it turns out to  be a non-issue.
The server will convert the 2012-03-29T22:00:00.000Z automatically back to the correct date with timezone:
Fri Mar 30 2012 00:00:00 GMT+0200 (Romance Daylight Time)

Since accessing the date using the datePicker's value() function produces the right date, and since on the server the date is correct, there is no issue... Except of course with direct String parsing as in Christina's case. In such cases, you need to take the timezone into account.

Best Regards,
Wannes.

5 Answers, 1 is accepted

Sort by
0
Kwex
Top achievements
Rank 1
answered on 03 Apr 2012, 11:26 AM
I changed mine at the Controller level in C# rather than at the client level. Okay approach for me as I didn't need to sort or use any other Kendo features.

My LINQ statement was thus:

...
            var result = from p in <dataset>
                         orderby <your column>
                         select new
                         {
                             InceptionDate = ConversionUtil.DateToString(p.InceptionDate, 0),
                             ExpiryDate = ConversionUtil.DateToString(p.ExpiryDate, 0)
                         };
...

<Conversion Function>

        public static string DateToString(DateTime? dateTime, int type)
        {
            if (dateTime == null || dateTime.ToString() == "") return "";

            switch (type)
            {
                case 1:
                    return dateTime.Value.ToString("dd/MM/yyyy");

                default:
                    return dateTime.Value.ToString("dd-MMM-yyyy");
            }
        }
0
Kwex
Top achievements
Rank 1
answered on 12 Apr 2012, 11:10 AM
Found another way of doing it from the Kendo site (http://demos.kendoui.com/web/grid/local-data.html): 

columns: [
                             
              {
                  field: "BirthDate",
                  title: "Birth Date",
                  template:
'#= kendo.toString(BirthDate, "dd/MM/yyyy") #'
 
              },
              {
                  field: "Age",
                  width: 50
              }
         ]
0
Chanaka
Top achievements
Rank 2
answered on 30 Aug 2012, 06:25 AM
It is a Simple  Answer Use parameterMap and column format

parameterMap: function (options, operation) {
                            if (operation != "read") {
                                var d = new Date(options.Date);
                                options.Date = d.toString("yyyy-MM-dd");                            
                                return options;
                            }
                        }

{ field: "Date", title: "Date ", type: "date", format: "{0:dd/MM/yyyy}" }

result : 30/08/2012

Hope this will help all of you all  
Omar
Top achievements
Rank 1
commented on 15 Oct 2012, 11:29 AM

Hello,

I've tried to use the snippet of Chanaka on but doesn't' work for me.
I'm mysql crud actions based on this http://www.kendoui.com/forums/ui/grid/crud-actions---what-should-server-response-be.aspx

Please help me out here.
Thanks in advanced.
Chanaka
Top achievements
Rank 2
commented on 15 Oct 2012, 04:31 PM

Omar
can You tell me what is your current output of the Date.

you might also try defining a Schema in the Data Source like this.

 
 dataSource: new kendo.data.DataSource({
                    transport: {
                        read: "someHandler.ashx"
                    },
                    pageSize: 8,
                    schema: {
                        type: "xml",// or PHP or JSON 
                        data: "Errors/E2ETraceEvent",
                        model: {
                            fields: {
                                DateCreated: { field: "your date filed name", type: "date", format: "{0:dd/MM/yyyy}" },
                                TimeCreated: { field: "your date filed name", type: "date", format: "{0:h:mm:ss tt}" }
                            }
                        }
                    },
                    error: function (e) {
                        //Hadel your erros here
                    }
                }) Refer to the API DOC :http://docs.kendoui.com/api/framework/datasource And in your Grid where you define Colums do this too.
columns: [
                    {
                        field: "somename", type: "date", format: "{0:dd/MM/yyyy}"
                    },
           {
               field: "Somename", type: "date", format: "{0:h:mm:ss tt}"
           },
Omar
Top achievements
Rank 1
commented on 15 Oct 2012, 06:34 PM

Hello Chanaka,

the Date field is set to date in mysql.

I get correct date format (dd/MM/yyyy or 15/10/2012) when I fetch the database and "null" when I create a new row or update an existing row.

Omar
Top achievements
Rank 1
commented on 16 Oct 2012, 10:06 AM

Unfortunately it didnt work.
Chanaka
Top achievements
Rank 2
commented on 16 Oct 2012, 04:15 PM

I'm not PHP expert but must be something wrong how you get data.
Brandon
Top achievements
Rank 1
commented on 06 Oct 2016, 12:44 AM

1.{
2.field: "RequestedDate",
3.title: "Requested Date",
4.width: "134px",
5.editor: requestedDatePicker,
6.template: "#if (RequestedDate) {#= kendo.toString(kendo.parseDate(RequestedDate, 'yyyy-MM-dd'), 'MM-dd-yyyy')#} #" },

 

How can I get the above example to work properly with the If statement? I can't seem to find an example or good documentation.

 

Thanks.

Brandon
Top achievements
Rank 1
commented on 06 Oct 2016, 04:34 PM

1.{ field: "RequestedDate",
2.title: "Requested Date",
3.width: "134px",
4.editor: requestedDatePicker,
5.template: "#if(RequestedDate){# #= kendo.toString(kendo.parseDate(RequestedDate, 'yyyy-MM-dd'), 'MM-dd-yyyy')# #}#" },
6. 
7.First hash starts the if block, the brace hash starts the code to be executed inside the if block, hash equals starts the template rendering.
Dimiter Topalov
Telerik team
commented on 10 Oct 2016, 02:13 PM

Hi Brandon,

You can use conditional statements in templates, as shown in the following simple demo:

http://dojo.telerik.com/IxIrU

More information about Kendo UI Templates is available in the following documentation article:

http://docs.telerik.com/kendo-ui/framework/templates/overview#template-syntax

Alternatively, you can use the columns.format option:

http://dojo.telerik.com/IxIrU/3

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Robert
Top achievements
Rank 1
answered on 21 Mar 2013, 10:35 AM
It may have something to do with the fact that in JS months are zero-based: look here

Regards, Rob
0
Peraiah
Top achievements
Rank 1
answered on 18 Aug 2017, 07:48 AM

This might helpful,

columns.Bound(date=> date.START_DATE).Title("Start Date").Format("{0:MM dd, yyyy}");

Tags
Date/Time Pickers
Asked by
christina
Top achievements
Rank 1
Answers by
Kwex
Top achievements
Rank 1
Kwex
Top achievements
Rank 1
Chanaka
Top achievements
Rank 2
Robert
Top achievements
Rank 1
Peraiah
Top achievements
Rank 1
Share this question
or