Sorry, but I can’t reproduce the display of '2012-08-20T18:27:25.05' as '08/21/2012 03:25 AM' formatoptions '08/21/2012 03:25 AM' without the formatoptions that you turned on. To display the hour with leading zeros, you should use formatter: "date" with h:i instead of h:i (see here PHP date format used in jqGrid)
formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i A" }
The demo displays the correct formatted date:
UPDATED . I debugged the demo you posted. The cause of the described problem is the incorrect grid.locale-en.min.js that you used. Replacing it with the original grid.locale-en.js fixes the problem.
jqGrid does not provide fully collapsed versions of jqGrid files. I personally use Microsoft Ajax Minifier to create a minimal version of grid.locale-en.js and ui.jqgrid.css . Often I use a modified version of jquery.jqGrid.src.js that contains some bug fixes. Therefore, I also generate a new jquery.jqGrid.min.js from a modified version of jquery.jqGrid.src.js . Another important function that I overlook in the standard jqGrid redistribution is map files, which allow you to see the source jquery.jqGrid.src.js in the debugger during use, minimizing the version ( jquery.jqGrid.min.js ). Microsoft Ajax Minifier allows you to generate a Source Map using the –map:v3 switch.
Therefore, I minimize the source files jquery.jqGrid.src.js , grid.locale-en.js and ui.jqgrid.css (all files are in the current directory in the example below) with the following calls to 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
I tested your demo using original and minimized jqGrid files, and both formats have the same correct date format.
Some other general comments on your demo code:
- I strongly recommend using the
gridview: true parameter in all your grids (see answer ), which will improve the performance of your grid without any disadvantages. - I recommend including the original
ui.jqgrid.css in your project. You are currently setting many CSS rules in your custom production.min.css . This makes it difficult to debug your project and makes it difficult to upgrade to the next version of jqGrid in the future. - You use the
!important attribute in many of the rules you specify. I do not recommend you to do this. You need to use !important only if you need to overwrite another CSS parameter that already uses !important . In other cases, just specify a more specific CSS rule. For example, instead of .ui-jqgrid .ui-jqgrid-bdiv { height: 300px !important; } .ui-jqgrid .ui-jqgrid-bdiv { height: 300px !important; } you can simply use the height: 300 option for jqGrid or specify .ui-jqgrid .ui-jqgrid-bdiv { height: 300px; } .ui-jqgrid .ui-jqgrid-bdiv { height: 300px; } . - I understand that some CSS rules need to be added if you use
bootstrap.css . I have posted several suggestions on this. You can try adding the following roles after <link> , which includes bootstrap.min.css and 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>
I get the rules from my old demo, which also uses bootstrap.css . In your case, you probably need to add
.ui-jqgrid .ui-jqgrid-bdiv { height: auto !important; } .ui-jqgrid tr.jqgrow td button.btn { margin: 2px 0; }
I think the above CSS will improve the look of your page.