Format Date in Grid

[christina]

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]

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]

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.

[Kwex]

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");
            }
        }

[Kwex]

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
              }
         ]

[Chanaka]

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]

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]

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]

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]

Unfortunately it didnt work.

[Chanaka]

I'm not PHP expert but must be something wrong how you get data.

[Brandon]

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]

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]

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

[Robert]

It may have something to do with the fact that in JS months are zero-based: look here

Regards, Rob

[Peraiah]

This might helpful,

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