Question

我有一个jqGrid（最新版本4.6.0）绑定到来自Web服务的json数据。我试图将日期格式化为m/d/Y H:i A的日期时间源数据是

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

使用格式化 With Formatting

没有格式化 Without Formatting

Answer 1

很抱歉，但我无法重现'2012-08-20T18:27:25.05'显示'08/21/2012 03:25 AM'，而不是formatoptions。要显示带前导零的小时，您应该使用formatter: "date"而不是h:i而不是H:i（请参阅jqGrid中使用的here PHP日期格式）

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

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

enter image description here

更新：我调试了您发布的演示。 所述问题的原因是您使用的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允许使用–map:v3开关生成Source Map文件。

因此，我使用以下Microsoft Ajax Minifier调用最小化原始jquery.jqGrid.src.js，grid.locale-en.js和ui.jqgrid.css文件（所有文件都在以下示例中的当前目录中）： / p>

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的其他CSS设置时，才必须使用!important。在其他情况下，足以指定更具体的 CSS规则。例如，您可以使用jqGrid的.ui-jqgrid .ui-jqgrid-bdiv { height: 300px !important; }选项代替height: 300，或指定.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会改善你网页的外观。

jqGrid列日期时间格式

1 个答案: