JQgrid on c# MVC Page DateTime getting displayed wtih timezone offset applied... want to display server time instead

Question

We are using a JQgrid in an asp.net MVC application...

The Jqgrids are as designed doing the time zone offsets on all date times displayed within...

we want to display the server time instead (non modified for timezone)

I found this answer: jqgrid is displaying different datetime based on time zones

which tells me to use a custom formatter to reformate the MS style datetime to a noew format using the Json Serializer..

here is my grid definitio

function InitJqGridMon() {
        startUrl = '@Url.Action("GetClassPeriodsByDayCd", "Scheduling")';
        GridParams = { url: startUrl, colModel: [
                     { name:'Scheduled',        index:'Scheduled',      label:'   ', align:'left', width:2, formatter: FormatCheckBox },
                     { name:'PeriodId',         index:'PeriodId',       hidden: true  },
                     { name:'PeriodNo',         index:'PeriodNo',       label:'Per', align:'center', width:2 },
                     { name:'PeriodStartTm',    index:'PeriodStartTm',  label:'Start', align:'left', width:4, formatter: date,  formatoptions: { srcformat: 'mdY', newformat: 'h:i A'} },
                     { name:'PeriodEndTm',      index:'PeriodEndTm',    label:'End', align:'left', width:4, formatter: date,  formatoptions: { srcformat: 'mdY', newformat: 'h:i A'} },
                     { name:'Available',        index:'Available',      label:'Avl.', align:'left', width:2, formatter: FormatAvailable },
                     { name:'ClsId',            index:'ClsId',          hidden: true  },
                     { name:'ClsPeriodId',      index:'ClsPeriodId',    hidden: true  },
                     { name:'CtrId',            index:'CtrId',          hidden: true  },
                     { name:'PeriodDayCd',      index:'PeriodDayCd',    hidden: true  },
                     { name:'BeoIndex',         index:'BeoIndex',       hidden: true  },
                     { name:'ScheduledModified', index:'ScheduledModified',   hidden: true  }
        ] };

and I have this defined in scope...

var myEditSerialize = function (data) {
     var obj = $.extend({}, data);
     obj.RolloutTermin = jQuery.datepicker.parseDate('dd.mm.yy', data.RolloutDate);
     if (Date.isInstanceOfType(obj.RolloutDate)) {
         obj.RolloutDate= '\/Date(' + obj.RolloutDate.getTime() + ')\/';
}

return JSON.stringify(obj);

I then made this change:

{ name:'PeriodStartTm', index:'PeriodStartTm', label:'Start', align:'left', width:4, formatter: myEditSerialize , formatoptions: { srcformat: 'mdY', newformat: 'h:i A'} },

and it failed

I dug around for an example of a working formatter in our code and tried this

function FormatDateTime(cellValue, options, rowObject)
        {
          var obj = $.extend({}, cellValue);
          obj.RolloutTermin = jQuery.datepicker.parseDate('dd.mm.yy', cellValue.RolloutDate);
          if (Date.isInstanceOfType(obj.RolloutDate)) {
          obj.RolloutDate= '\/Date(' + obj.RolloutDate.getTime() + ')\/';
          return JSON.stringify(obj);

        }

{ name:'PeriodStartTm',    index:'PeriodStartTm',  label:'Start', align:'left', width:4, formatter: FormatDateTime,  formatoptions: { srcformat: 'mdY', newformat: 'h:i A'} },

but when I run it, data . rollout date is undefined...

At this point I realize I don't understand enough about what I'm trying to do to solve my problem to understand the correct implementation of the given answer....

When I debug

var obj = $.extend({}, cellValue);

Obj is a char arrive of the value of the datetime serialized by MS (milliseconds since the epoch) not some object that has a RolloutDate property...

I'm lost, can someone please help me understand what is going on, and point me towards the right way to solve this problem? I'm not a great JavaScript guy, I can sort of do Jquery, and I've used a JQGrid only a handful of times.. mostly boiler plate.. So I'm sure it's my lack of jqgrid-fu that's the problem.

Answer 1

A couple of options:

1. Send the date down from the server as a string rather than a DateTime object.

2. Use a custom formatter for jqgrid that converts the DateTime javascript object to UTC time. I recommend using moment.js

Here is my custom date formatter in javascript:

function utcDateFormatter(cellvalue, options, rowObject) {
    if (cellvalue) {
        return moment(cellvalue).utc().format("MM/DD/YYYY");
    } else {
        return '';
    }
}

Add this to your colmodel:

formatter: utcDateFormatter

I was also using Entity Framework on the server side which was also converting the DateTime fields coming from the database to local server time. Check to make sure the DateTime isn't being converted both on the server and client (it won't creep it's head until server/client timezones are different).

Here's a good article: http://www.hanselman.com/blog/OnTheNightmareThatIsJSONDatesPlusJSONNETAndASPNETWebAPI.aspx

Specifically check out how he uses PowerShell convert json datetime to regular datetime for debugging purposes:

PS C:\> (new-object DateTime(1970,1,1,0,0,0,0)).AddMilliseconds(1330848000000).AddHours(-8)

Sunday, March 04, 2012 12:00:00 AM

EDIT:

Here's my full model for a datetime column:

{
                        name: 'StatusDateUtc',
                        index: 'StatusDateUtc',
                        width: 140,
                        align: 'left',
                        editable: true,
                        formatter: utcDateFormatter,
                        sorttype: 'date',
                        editoptions: {
                            dataInit: function(elem) {
                                $(elem).datepicker({
                                    changeMonth: true,
                                    changeYear: true,
                                    showButtonPanel: true
                                });
                            }
                        }
                    }