jqGrid列日期时间格式

Question

我有一个 jqGrid(最新版本 4.6.0)绑定(bind)到来自 Web 服务的 json 数据。我正在尝试将日期格式化为 m/d/Y H:i A 的 DateTime
源数据是

'2012-08-20T18:27:25.05'

应该格式化为

'08/20/2012 06:27 PM' 

但正在格式化为

'08/21/2012 03:25 AM'

我看到正在发生的事情，解析器绕过 18 并直接进入 27 小时，这将一天翻转到 21 日而不是 20 日，并将时间设置为 03:25 AM。
这是我的 gridCol 的格式化程序语句。

formatter: "date",
formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y H:i A" },

我什至试过...

formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y g:i A" },

和...

formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y H:i:s A" },

没有运气。有什么想法吗？

谢谢

更新:
这是我为相关列实现的完整列格式设置以及结果的屏幕截图。

{ name: 'APTDATE',
  index: 'APTDATE',
  align: "right",
  editable: true,
  editrules: { required: true },
  formoptions: { rowpos: 3, colpos: 1 },
  formatter: "date",
  formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i A" },
}, 

带格式


不格式化

Answer 1

抱歉，我无法重现显示 '2012-08-20T18:27:25.05'如'08/21/2012 03:25 AM'否 formatoptions你包括在内。要显示带前导零的小时，您应该使用 formatter: "date"与 h:i而不是 H:i (见 here jqGrid 中使用的 PHP 日期格式)

formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i A" }

The demo显示正确的格式化日期:



更新 :我调试了您发布的演示。 所描述问题的原因是错误的grid.locale-en.min.js你用过的。 换成原来的 grid.locale-en.js解决问题。

jqGrid 不提供 jqGrid 文件的完整最小化版本。我个人使用 Microsoft Ajax Minifier生成 grid.locale-en.js 的最小化版本和 ui.jqgrid.css .我经常使用 jquery.jqGrid.src.js 的修改版本其中包括一些错误修复。所以我生成新的 jquery.jqGrid.min.js来自 jquery.jqGrid.src.js 的修改版本也。我在 jqGrid 的标准重新分发中错过的另一个重要特性是映射文件，它允许在调试器中查看原始 jquery.jqGrid.src.js在使用期间最小化版本( jquery.jqGrid.min.js )。 Microsoft Ajax Minifier 允许生成 Source Map使用 –map:v3 的文件转变。

所以我最小化原来的 jquery.jqGrid.src.js , grid.locale-en.js和 ui.jqgrid.css使用以下 Microsoft Ajax Minifier 调用的文件(在下面的示例中，所有文件都在当前目录中):

SET AjaxMinExe=%ProgramFiles(x86)%\Microsoft\Microsoft Ajax Minifier\AjaxMin.exe
"%AjaxMinExe%" -enc:in utf-8 -clobber:true jquery.jqGrid.src.js -o jquery.jqGrid.min.js -map:v3 jquery.jqGrid.min.map
"%AjaxMinExe%" -enc:in utf-8 -enc:out utf-8 -clobber:true grid.locale-en.js -o grid.locale-en.min.js -map:v3 grid.locale-en.min.map
"%AjaxMinExe%" -clobber:true ui.jqgrid.css -o ui.jqgrid.min.css -map:v3 ui.jqgrid.min.map

我使用原始和最小化的 jqGrid 文件测试了您的演示，并且都生成了相同的正确日期格式。

演示代码的其他一些常见注释:

我强烈建议使用 gridview: true所有网格中的选项(参见 the answer )，这将提高网格的性能而没有任何缺点。

我建议包括 原创 ui.jqgrid.css在你的项目中。目前，您在自定义 production.min.css 中设置了许多 CSS 规则。 .它使您的项目调试变得复杂，并且使将来难以迁移到 jqGrid 的下一个版本。

您使用 !important您指定的许多规则中的属性。我不建议你这样做。必须使用 !important仅当需要覆盖已使用 !important 的其他 CSS 设置时.在其他情况下，指定更具体的 CSS 规则就足够了。例如，而不是 .ui-jqgrid .ui-jqgrid-bdiv { height: 300px !important; }你可以使用 height: 300 jqGrid 的选项或指定.ui-jqgrid .ui-jqgrid-bdiv { height: 300px; } .

我知道如果使用 bootstrap.css，则必须添加一些 CSS 规则。 .我发表了一些关于该主题的建议。您可以尝试在<link> 之后添加以下角色其中包括 bootstrap.min.css和 ui.jqgrid.css :

<style type="text/css">
    .ui-jqgrid .ui-pg-table .ui-pg-input, .ui-jqgrid .ui-pg-table .ui-pg-selbox {
        height: auto;
        width: auto;
        line-height: inherit;
    }
    .ui-jqgrid .ui-pg-table .ui-pg-selbox {
        padding: 1px;
    }
    .ui-jqgrid { line-height: normal; }
    .ui-jqgrid table {
        border-collapse: separate;
        border-style: none;
        border-top-style: none;
    }
    .ui-jqgrid table.ui-jqgrid-btable {
    }
    .ui-paging-info { display: inline; }
    .ui-jqgrid .ui-pg-table { border-collapse: separate; }
    div.ui-jqgrid-view table.ui-jqgrid-btable td {
        border-left-style: none
    }
    div.ui-jqgrid-view table.ui-jqgrid-htable {
        border-style: none;
        border-top-style: none;
        border-collapse: separate;
    }
    div.ui-jqgrid-view table.ui-jqgrid-btable th {
        border-left-style: none
    }
    .ui-jqgrid .ui-jqgrid-htable th div {
        height: auto;
    }
    .ui-jqgrid .ui-jqgrid-resize {
        height: 18px !important;
    }
    .ui-jqgrid .ui-pg-table {
        padding-bottom: 0;
    }
    .ui-jqgrid>.ui-jqgrid-pager {
        border-right-color: inherit !important;
        border-right-style: solid !important;
        border-right-width: 1px !important;
    }
    .ui-jqgrid tr.jqgrow td {
        vertical-align: middle;
    }
    .ui-jqgrid tr.jqgrow {
        height: auto;
    }
    .ui-jqgrid .ui-jqgrid-pager {
        height: auto;
    }
</style>

我从使用 bootstrap.css 的旧演示中获得规则也。在您的情况下，您可能需要另外添加

.ui-jqgrid .ui-jqgrid-bdiv {
    height: auto !important;
}
.ui-jqgrid tr.jqgrow td button.btn {
    margin: 2px 0;
}

我认为上面的 CSS 会改善你页面的外观。