jqGrid Spalte DateTime Formatierung

Question

Ich habe ein JqGrid (neueste Version 4.6.0) an JSON-Daten von einem Webdienst gebunden. Ich versuche, das Datum in einem DateTime- von m/d/Y H:i A Die Quelldaten zu formatieren ist

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

die

'08/20/2012 06:27 PM' 

zu

formatieren sollte, aber die Formatierung zu

'08/21/2012 03:25 AM' 

ich sehen, was passiert darin, dass der Parser die 18 überspringt und direkt zu den 27 für die Stunden geht, die den Tag auf den 21. statt den 20. und den Flips umdrehen die Zeit bis 03:25 Uhr. Dies sind meine Formatierer Anweisungen für meine gridCol.

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

ich sogar versucht, ...

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

und ...

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

ohne Glück. Irgendwelche Gedanken?

Dank

UPDATE: Hier ist die vollständigen Spalt Formateinstellungen I für die betreffende Spalte und einen Screenshot der Ergebnisse umgesetzt werden.

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

Mit Formatierung

ohne Formatierung

Answer 1

Sorry, aber ich kann nicht reproduzieren '2012-08-20T18:27:25.05' als '08/21/2012 03:25 AM' durch keine formatoptions anzeigt, die Sie enthalten. Zur Anzeige Stunde mit führenden Nullen Sie formatter: "date" mit h:i statt H:i verwenden soll (siehe here PHP Datumsformat in jqGrid verwendet)

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

The demo Anzeige korrigieren formatiert Datum:

AKTUALISIERT : Ich habe die Demo debugged, die du gepostet hast. Der Grund für das beschriebene Problem ist falsch grid.locale-en.min.js, die Sie verwendet haben. Ersetzen Sie das Original grid.locale-en.js behebt das Problem.

jqGrid bietet keine vollständig minimierten Versionen von jqGrid-Dateien. Ich persönlich benutze Microsoft Ajax Minifier, um eine reduzierte Version von grid.locale-en.js und ui.jqgrid.css zu generieren. Häufig verwende ich eine modifizierte Version von jquery.jqGrid.src.js, die einige Fehlerkorrekturen enthält. Also erzeuge ich neu jquery.jqGrid.min.js aus der modifizierten Version jquery.jqGrid.src.js auch.Ein weiteres wichtiges Merkmal, das ich in den Standardumverteilungen von jqGrid vermisse, sind Kartendateien, die es ermöglichen, das Original jquery.jqGrid.src.js während der Verwendung der minimierten Version im Debugger zu sehen (jquery.jqGrid.min.js). Microsoft Ajax Minifier ermöglicht, Source Map Datei durch Verwendung von –map:v3 Switch zu generieren.

So minimiere ich die ursprünglichen jquery.jqGrid.src.js, grid.locale-en.js und ui.jqgrid.css Dateien (alle Dateien im aktuellen Verzeichnis in dem unten stehenden Beispiel sind) mit den folgenden Aufrufen von 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 

ich Ihre Demo getestet mit Original und minimierte jqGrid-Dateien und beide erzeugen das gleiche korrekte Datumsformat.

---

Einige andere gebräuchliche Bemerkungen zum Code Ihrer Demo:

• Ich empfehle streng gridview: true Option in allen Netzen (siehe the answer) verwendet werden, die ohne Nachteile Leistung Ihres Gitters zu verbessern.
• Ich empfehle, in Ihrem Projekt Originalui.jqgrid.css aufzunehmen. Derzeit haben Sie viele CSS-Regeln in Ihrem benutzerdefinierten production.min.css festgelegt. Es macht ein komplexes Debugging Ihres Projekts und erschwert die Umstellung auf die nächste Version von jqGrid in der Zukunft.
• Sie verwenden !important Attribut in vielen Regeln, die Sie angeben. Ich empfehle dir das nicht. Man muss !important nur verwenden, wenn man andere CSS-Einstellungen überschreiben muss, die bereits !important verwenden. In anderen Fällen reicht es aus, spezifischer CSS-Regel anzugeben. Zum Beispiel können Sie anstelle von .ui-jqgrid .ui-jqgrid-bdiv { height: 300px !important; } einfach die height: 300 Option von jqGrid verwenden oder .ui-jqgrid .ui-jqgrid-bdiv { height: 300px; } angeben.
• Ich verstehe, dass man einige CSS-Regeln hinzufügen müssen, wenn man bootstrap.css verwendet. Ich habe etwas über mein Thema gepostet. Sie können versuchen, die folgenden Rollen nach <link> die bootstrap.min.css und ui.jqgrid.css enthält hinzuzufügen:

<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, die zu bootstrap.css bekommen die Regeln von meinem alten Demo verwendet. In Ihrem Fall müssen Sie wahrscheinlich zusätzlich hinzufügen

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

Ich denke, dass die oben genannten CSS das Aussehen Ihrer Seite verbessern wird.