jQWidgets Forums

Tagged: datagrid, datagrid date column

This topic contains 9 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 8 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Having problems getting correct hour from Griid DateTime field in JSON String Posts
August 7, 2013 at 9:33 pm Having problems getting correct hour from Griid DateTime field in JSON String #26452
DaveB
Participant
I am having an odd issue interpreting the correct time, specifically the hour that is created when I export the grids contents for some date time columns. In my grid I do a getrows and convert the object to a JSON string. Works great for everything, but for date time columns it appears that it is not returning the correct hour that was entered in the grid by the user. So for example, I have a column on the grid that has the following value: 2013-08-24 04:11:09PM, which is correct, however, if I export that data and send it back to the server as shown below the JSON string sent to the server has the following value: “startDtm”:”2013-08-24T20:11:09.000Z“. Instead of returning 4 PM it is returning 8 PM. The cell format I am using is cellsformat: ‘yyyy-MM-dd hh:mm:sstt’ and the code I use to convert the field into a JSON String is below. I am not sure what I am missing here. Any thoughts?
```
	var jsonObj= $('#jqxgrid').jqxGrid('getrows');
	var jsonStr = "jsonStr=" + encodeURIComponent( JSON.stringify(jsonObj) );
```
August 8, 2013 at 4:34 am Having problems getting correct hour from Griid DateTime field in JSON String #26465

Peter Stoev
Keymaster

Hi DaveB,

For binding the Grid to Data Sources see: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm. The help topic illustrates how to add a Date Column, too. Especially that a Date column which has a Strange format, should be initialized in the following way: { name: ‘SubmitDate’, type: ‘date’, format: “yyyy-MM-ddTHH:mm:ss-HH:mm” } where format is the format that match to your Data Source’s Format.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 8, 2013 at 2:28 pm Having problems getting correct hour from Griid DateTime field in JSON String #26495
DaveB
Participant
That may be the issue as my server is passing in a format that I am not familiar with (the date comes in a numeric format). I have an example below that illustrates my issue. The grid produce the correct result from the data source, however, when I convert it to JSON by hitting the JSON button the resulting JSON string is off by a four hours. Possibly the number format have the timezone built in and when it is exported it is using the local timezone? If it makes any difference I am using JQWidgets 2.8.3.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to enable sorting and sort by a column.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
   <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
			
// prepare the data
var data = new Array();
var shippedDate =
[
"1377389469000"
];
var shipName =
[
"test"
];
var row = {};
row["shippedDate"] = shippedDate;
row["shipName"] = shipName;
data[0] = row;
			
            // prepare the data
            var source =
            {
                localdata: data,
				datatype: 'array',
					datafields: [
                    { name: 'shippedDate', type: 'date' },
                    { name: 'shipName', type: 'string', format: 'yyyy-MM-dd  hh:mm:sstt' },
                ],
                id: 'id',
                data: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create jqxgrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 450,
                source: dataAdapter,
                theme: theme,
                altrows: true,
                columns: [
                  { text: 'Ship Name', datafield: 'shipName', width: 250 },
                  { text: 'Shipped Date', datafield: 'shippedDate', width: 200, cellsformat: 'yyyy-MM-dd  hh:mm:sstt' }
                ]
            });
            $('#events').jqxPanel({ width: 300, height: 80, theme: theme });
            $('#jsonbutton').jqxButton({ height: 25, theme: theme });
            
			$('#jsonbutton').click(function () {
			  var jsonObj = $('#jqxgrid').jqxGrid('getrows');
				
			   alert(JSON.stringify(jsonObj));
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div id="eventslog" style="margin-top: 30px;">
            <div style="float: left; margin-right: 10px;">
            <input value="JSON" id="jsonbutton" type="button" />
            <div style="margin-top: 10px;" id='sortbackground'>Sort Background</div>
            </div>
            <div style="margin-left: 100px; float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
        </div>
    </div>
</body>
</html>
```
August 8, 2013 at 4:48 pm Having problems getting correct hour from Griid DateTime field in JSON String #26497

Peter Stoev
Keymaster

Hi DaveB,

As we do use the JavaScript Date object, it will use the local time zone because we do not know your server’s time-zone. If you make server updates, you may correct the Date object taking into account the required time zone before sending the value to the server.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 8, 2013 at 5:21 pm Having problems getting correct hour from Griid DateTime field in JSON String #26504

DaveB
Participant

ok, but when it comes down from the server and the grid renders it correctly, shouldn’t it send back the same value correctly as well? The grid seems to be smart enough to figure that out, as in the example, the grid shows the date 2013-08-24 08:11:09PM, which is correct, but when I click the JSON which exports the date to JSON the resulting date is [{“shippedDate”:”2013-08-25T00:11:09.000Z”,”shipName”:”test”,”uid”:0}], which is four hours off. I am a little confused as to how I can handle this.

August 8, 2013 at 5:57 pm Having problems getting correct hour from Griid DateTime field in JSON String #26508

Peter Stoev
Keymaster

Hi DaveB,

What you get from your server is a String. So the Date parsed by the Grid will be with local Time Zone.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

August 9, 2013 at 3:07 am Having problems getting correct hour from Griid DateTime field in JSON String #26534
DaveB
Participant
Looking deeper into this I don’t think this has anything to do with the timezone, rather I believe this is a bug. If I change the line where the shippedDate is set in the array to the code below it shows as 2013-08-24 09:12:17AM in the grid as you would expect, but when you export the grid to JSON it is still off by four hours [{“shippedDate”:”2013-08-24T13:12:17.000Z”,”shipName”:”test”,”uid”:0}]. Its almost as if it is trying to adjust the timestamp to some other timezone. Remember, in this example now there is no other timezone or server, everything is on my machine.
```
var shippedDate =
[
"2013-08-24 09:12:17AM"
];
```
August 9, 2013 at 3:26 am Having problems getting correct hour from Griid DateTime field in JSON String #26535

DaveB
Participant

Actually it looks like this is not a JQWidgets issue at all. The issue is that when I call JSON.stringify it will convert the dates to GMT dates instead of the local datetime.

August 9, 2013 at 2:59 pm Having problems getting correct hour from Griid DateTime field in JSON String #26574

DaveB
Participant

One last follow up on this question. What would be the recommended best practice in this situation? JQWidgets does what I would expect, but when I convert the data back to JSON via stringify the times are converted to GMT time instead of the time that was in the grid. I suppose I could send the timezone offset back to the server and update the dates when I process them, but that is a little ugly. Searching google I haven’t found an alternative to stringify that would give me the date in the local time instead of GMT.

August 9, 2013 at 9:11 pm Having problems getting correct hour from Griid DateTime field in JSON String #26593

Peter Stoev
Keymaster

Hi DaveB,

Why is it necessary to convert it with stringify? The row from the Grid is already in key: values format and you may send it directly to the server in the way it is.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.