jqGrid列日期时间格式

Question

我有一个jqGrid(最新版本4.6.0)绑定到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(见这里在使用的jqGrid PHP日期格式)

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

演示显示正确的格式化日期:

更新:我调试了你发布的演示.您所使用的所述问题的原因是错误的grid.locale-en.min.js.将其替换为原始grid.locale-en.js修复问题.

jqGrid不提供jqGrid文件的完全最小化版本.我个人使用微软的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允许通过使用switch 生成源映射文件–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您在所有网格中使用选项(请参阅答案),这将提高您的网格性能,没有任何缺点.
• 我建议在你的项目中加入原文 ui.jqgrid.css.目前,您在自定义中设置了许多CSS规则production.min.css.它会对您的项目进行复杂的调试,并且很难在将来转移到下一版本的jqGrid.
• 您!important在指定的许多规则中使用属性.我不建议你这样做.一个必须使用!important只有一个需要重写它已经使用其他CSS设置!important.在其他情况下,足以指定更具体的 CSS规则.例如,.ui-jqgrid .ui-jqgrid-bdiv { height: 300px !important; }您可以只使用height: 300jqGrid选项或指定.ui-jqgrid .ui-jqgrid-bdiv { height: 300px; }.
• 我知道如果使用一个必须添加一些CSS规则bootstrap.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会改善你的页面外观.