jquery - c# MVC 页面上的 JQgrid 在应用时区偏移的情况下显示日期时间......想要显示服务器时间

Question

我们在 asp.net MVC 应用程序中使用 JQgrid ...

Jqgrids 按照设计在所有日期时间上执行时区偏移...

我们想显示服务器时间(未修改时区)

我找到了这个答案:
jqgrid is displaying different datetime based on time zones

它告诉我使用自定义格式化程序使用 Json Serializer 将 MS 样式日期时间重新格式化为 noew 格式。

这是我的网格定义

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

我在范围内定义了这个......

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() + ')\/';
}

返回 JSON.stringify(obj);

然后我做了这个改变:

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

它失败了

我在我们的代码中挖掘了一个工作格式化程序的例子并尝试了这个

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'} },

但是当我运行它时， data 。推出日期未定...

在这一点上，我意识到我对我试图做什么来解决我的问题以理解给定答案的正确实现还不够了解......

当我调试

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

Obj 是由 MS 序列化的日期时间值的字符到达(自纪元以来的毫秒数)，而不是某些具有 RolloutDate 属性的对象......

我迷路了，有人可以帮助我了解发生了什么，并指出解决这个问题的正确方法吗？我不是一个很棒的 JavaScript 人，我可以做 Jquery，而且我只使用过几次 JQGrid .. 主要是样板.. 所以我确定这是我缺乏 jqgrid-fu 的问题.

Answer 1

几个选项:

从服务器向下发送日期作为字符串而不是 DateTime 对象。

使用 jqgrid 的自定义格式化程序将 DateTime javascript 对象转换为 UTC 时间。我建议使用 moment.js

这是我在 javascript 中的自定义日期格式化程序:

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

将此添加到您的模型中:

formatter: utcDateFormatter

我还在服务器端使用 Entity Framework ，该框架还将来自数据库的 DateTime 字段转换为本地服务器时间。检查以确保服务器和客户端上的 DateTime 都没有被转换(直到服务器/客户端时区不同，它才会令人头疼)。

这是一篇好文章: http://www.hanselman.com/blog/OnTheNightmareThatIsJSONDatesPlusJSONNETAndASPNETWebAPI.aspx

具体查看他如何使用PowerShell将json datetime转换为常规日期时间以进行调试:

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

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

编辑:

这是我的日期时间列的完整模型:

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