jqGrid Column DateTime Formatting

Question

I have a jqGrid (latest version 4.6.0) bound to json data from a web service. I'm trying to format the date into a DateTime of m/d/Y H:i A The source data is

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

which should format to

'08/20/2012 06:27 PM' 

but is formatting to

'08/21/2012 03:25 AM'

I see what's happening in that the parser is bypassing the 18 and going directly to the 27 for the hours which flips the day to the 21st rather than the 20th and sets the time to 03:25 AM. This is my formatters statements for my gridCol.

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

I even tried...

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

and...

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

with no luck. Any thoughts?

Thanks

UPDATE: Here is the full column format settings I implemented for the column in question and a screenshot of the results.

{ 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

Sorry, but I can't reproduce displaying '2012-08-20T18:27:25.05' as '08/21/2012 03:25 AM' by no formatoptions which you included. To display 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 display correct formatted date:

UPDATED: I debugged the demo which you posted. The reason of the described problem is wrong grid.locale-en.min.js which you used. Replacing it to the original grid.locale-en.js fixs the problem.

jqGrid don't provides full minimized versions of jqGrid files. I personally use Microsoft Ajax Minifier to generate minimized version of grid.locale-en.js and ui.jqgrid.css. Frequently I use modified version of jquery.jqGrid.src.js which includes some bug fixes. So I generate new jquery.jqGrid.min.js from the modified version of jquery.jqGrid.src.js too. One more important feature which I miss in the standard redistributes of jqGrid are map files which allows to see in debugger the original jquery.jqGrid.src.js during using minimizes version (jquery.jqGrid.min.js). Microsoft Ajax Minifier allows to generates Source Map file by usage of –map:v3 switch.

So I minimize the original jquery.jqGrid.src.js, grid.locale-en.js and ui.jqgrid.css files (all the files are in the current directory in the below example) with the following calls of 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 produces the same correct date format.

---

Some other common remarks to the code of your demo:

• I strictly recommend to use gridview: true option in all your grids (see the answer) which will improve performance of your grid without any disadvantages.
• I recommend to include original ui.jqgrid.css in your project. Currently you set many CSS rules in your custom production.min.css. It makes complex debugging of your project and make difficult moving to the next version of jqGrid in the future.
• You use !important attribute in many rules which you specify. I don't recommend you to do this. One have to use !important only if one need to overwrite other CSS setting which already uses !important. In other cases it's enough to specify more specific CSS rule. For example instead of .ui-jqgrid .ui-jqgrid-bdiv { height: 300px !important; } you can just use height: 300 option of jqGrid or specify .ui-jqgrid .ui-jqgrid-bdiv { height: 300px; }.
• I understand that one have to add some CSS rules if one use bootstrap.css. I posted some my suggestion about the subject. You can try to add 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 uses bootstrap.css too. In your case you will need probably add additionally

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

I think that the above CSS will improve the look of your page.