web-dev-qa-db-ja.com

jqGrid列のDateTimeフォーマット

WebサービスからのjsonデータにバインドされたjqGrid（最新バージョン4.6.0）があります。日付を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に直接移動して、1日を20日ではなく21日に切り替え、時刻を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

jqgrid
7
Tim

申し訳ありませんが、'2012-08-20T18:27:25.05'を'08/21/2012 03:25 AM'として表示することを、あなたが含めたformatoptionsなしで再現することはできません。先行ゼロで時間を表示するには、formatter: "date"の代わりにh:iとH:iを使用する必要があります（ ここ PHP使用される日付形式を参照） jqGridで）

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

デモ 正しいフォーマットの日付を表示します：

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の標準の再配布で見逃しているもう1つの重要な機能は、最小化バージョン（jquery.jqGrid.src.js）の使用中に元のjquery.jqGrid.min.jsをデバッガーで確認できるマップファイルです。 Microsoft Ajax Minifierでは、–map:v3スイッチを使用して ソースマップ ファイルを生成できます。

そこで、Microsoft Ajax Minifierを次のように呼び出して、元のjquery.jqGrid.src.js、grid.locale-en.js、およびui.jqgrid.cssファイル（すべてのファイルは以下の例の現在のディレクトリにあります）を最小化します。

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オプションを使用することを強くお勧めします（ 回答 を参照）。これにより、不利な点なしにグリッドのパフォーマンスが向上します。
  • プロジェクトにoriginalui.jqgrid.cssを含めることをお勧めします。現在、カスタムproduction.min.cssで多くのCSSルールを設定しています。プロジェクトのデバッグが複雑になり、将来的に次のバージョンのjqGridに移行するのが難しくなります。
  • 指定する多くのルールで!important属性を使用します。これを行うことはお勧めしません。すでに!importantを使用している他のCSS設定を上書きする必要がある場合にのみ、!importantを使用する必要があります。それ以外の場合は、より具体的なCSSルールを指定するだけで十分です。たとえば、.ui-jqgrid .ui-jqgrid-bdiv { height: 300px !important; }の代わりに、jqGridの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はあなたのページの見栄えを良くすると思います。

12
Oleg