17.1 バージョン以後、グリッドは enableUTCDates
および dateDisplayType
の 2 つのオプションで日付を処理します。
enableUTCDates
- このオプションは igDateEditor および igDatePicker のオプションと同様です。日付の表示と関係ありません。日付のシリアル化のみを指定します。日付が UTC ISO 8061 文字列またはローカル時間およびタイムゾーン値でシリアル化されるかどうかを指定します。
たとえば、GMT の前の 5 時のローカル オフセットを持つクライアントからの「10:00」は、「2016-11-11T10:00:00+05:00」としてシリアル化されます。オプションのデフォルトの 'false' 値の場合です。それ以外の場合、日付は ISO UTC 形式を使用します: "2016-11-11T05:00:00Z"。dateDisplayType
– このオプションは columns 定義の部分で、日付列で使用できます。"local" (デフォルト値) に設定される場合、グリッドは日付をローカル タイム ゾーンで描画します。utc" に設定される場合、グリッドは日付を UTC で描画します。デフォルトの Ignite UI for MVC Grid のシナリオを処理するもう 1 つの動作がそのオプションで実装されます。タイム ゾーン オフセットのメタデータを持つデータ ソースが必要です。日付は追加されたオフセット (UTC) で描画されます。これはサーバーで表示される日付をユーザーに表示するためです。dateDisplayType オプションは日付型以外の列に影響せず、無視されます。注: Ignite UI for MVC Grid が初期化された場合、
enableUTCDates
がデフォルトでtrue
に設定されます。Ignite UI for jQuery Grid が初期化された場合、オプションがデフォルトでfalse
に設定されます。たとえば、enableUTCDates
がデフォルト動作を使用し、Ignite UI for MVC が使用される場合、日付が ISO UTC 形式 ("2016-11-11T05:00:00Z") でシリアル化されます。MVC 以外のシナリオでenableUTCDates
を指定しない場合は日付をローカル時間およびゾーン値 ("2016-11-11T10:00:00+05:00") にシリアル化します。
日付の処理を理解するには、日付の保存方法および保存場所が重要です。すべてのレコードおよび (日付などの) 値は igDataSource で保存されます。日付を保存する前に、まだ Date オブジェクトではない場合、igDataSource はそれを Date オブジェクトに変換します。保存された後、グリッド セルに表示されます。この表示は $.ig.formatter によって実行されます。formatter は dateDisplayType
オプションに基づいて日付を描画します。
もうひとつの動作変更は、トランザクション ログがシリアル化された日付を含みません。すべての日付は Date オブジェクトとして保存し、シリアル化が saveChanges が呼び出したときに渡されたパラメーターのみに適用されます。enableUTCDates オプションはシリアル化の方法を示します。
17.1 以後で、Ignite UI for MVC は以下の形式で日付を送信します。
{
"testData": {
"Records": [
{
"ProjectId": 0,
"Name": "Some project",
"ExpirationDate": "2010-03-13T08:10:10.000Z"
},
"..."
],
"Metadata": {
"timezoneOffset": 7200000,
"timezoneOffsets": {
"0": {
"ExpirationDate": 10800000
},
"..."
}
}
}
}
enableUTCDates
オプションは、グリッドが日付を表示してセルで使用する方法を決定します。
注: Ignite UI for MVC Grid が使用された場合、デフォルトで enableUTCDates オプションは有効にされます。それ以外の場合、オプションはデフォルトで無効されます。
注: Ignite UI for MVC がデータ ソースの処理で使用されたか、データ ソースがリモートで GridDataSource 属性が使用された場合、タイム ゾーン オフセットを持つメタデータが生成されます。
"Metadata": {
"timezoneOffset": 7200000,
"timezoneOffsets": {
"0": {
"ExpirationDate": 7200000
},
"1": {
"ExpirationDate": 7200000
},
...
}
各日付に指定のオフセットがあります。 タイム ゾーン オフセットのメタデータがある場合のデータ ソース。データ ソースにサーバー タイム ゾーン オフセットに関する情報が含まれる場合、igDataSource はオフセットを使用して変換されたデータを生成します。
{
"testData": {
"Records": [
{
"ProjectId": 0,
"Name": "Some project",
"ExpirationDate": "/Date(1268467810000)/"
},
"..."
],
"Metadata": {
"timezoneOffset": 7200000,
"timezoneOffsets": {
"0": {
"ExpirationDate": 10800000
},
"..."
}
}
}
}
データ ソースはオブジェクトを ExpirationDate のチックおよびこの日付のオフセットのチックの合計として保存します。以下はデータ ソースでの日付値の表現です:
new Date(1268467810000 + 10800000)
allTransactions() API メソッドから返されたトランザクションはすぐにシリアル化されます。日付がデータ ソースで更新または追加された場合、トランザクションの値は次の形式になります: /Date(1485881423759)/
。 pendingChanges()
API メソッドはシリアル化されていない日付オブジェクトを返します。
saveChanges()
API メソッドはシリアル化されたトランザクションをサーバーに送信します。
注: 16.2 バージョンで、MVC ラッパーが Microsoft 日付形式 (
/Date(1485881423759)/
) で日付を送信します。
17.1 以後、igDataSource は Microsoft 日付形式をサポートしません: /Date(1234656000000)/
。提供されたデータ ソースがそのようなデータを含む場合、ISO UTC 形式 "2009-02-15T00:00:00Z" に変更する必要があります。
Ignite UI for MVC が使用される場合、ユーザーによる構成が必要な項目はありません。Ignite UI for MVC は内部で Microsoft 形式を使用していましたが、17.1 以後では ISO UTC 形式で日付を送信します。
17.1 以後のバージョンで UTC 時間を表示:
$('#Grid1').igGrid({
dataSource: 'http://localhost:3000/testData',
dataSourceType: 'json',
responseDataKey: 'Records',
columns: [
{ key: 'ProjectId', dataType: 'number', headerText: 'Project ID', width: '100px' },
{ key: 'Name', dataType: 'string', headerText: 'Name', width: '150px' },
{ key: 'IsPostponed', dataType: 'bool', headerText: 'Is Postponed?', width: '100px' },
{ key: 'StartDate', dataType: 'date', headerText: 'Start Date', width: '190px', format: 'dateTime', dateDisplayType: 'utc' },
{ key: 'EndDate', dataType: 'date', headerText: 'End Date', width: '200px', format: 'dateTime', dateDisplayType: 'utc' }
]
});
16.2 と同じ構成:
$('#Grid1').igGrid({
dataSource: 'http://localhost:3000/testData',
dataSourceType: 'json',
responseDataKey: 'Records',
enableUTCDates: true,
columns: [
{ key: 'ProjectId', dataType: 'number', headerText: 'Project ID', width: '100px' },
{ key: 'Name', dataType: 'string', headerText: 'Name', width: '150px' },
{ key: 'IsPostponed', dataType: 'bool', headerText: 'Is Postponed?', width: '100px' },
{ key: 'StartDate', dataType: 'date', headerText: 'Start Date', width: '190px', format: 'dateTime' },
{ key: 'EndDate', dataType: 'date', headerText: 'End Date', width: '200px', format: 'dateTime' }
]
});
Ignite UI for MVC 17.1 以後:
@(Html.Infragistics().Grid(Model)
.ID("Grid1")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.Columns(column =>
{
column.For(project => project.ProjectId).HeaderText("Project ID").DataType("number").Width("100px");
column.For(project => project.Name).HeaderText("Name").DataType("string ").Width("200px");
column.For(project => project.IsPostponed).HeaderText("Is Postponed?").DataType("bool").Width("100px");
column.For(project => project.StartDate).HeaderText("Start Date").DataType("date").Width("150px").DateDisplayType(DateDisplayType.UTC);
column.For(project => project.EndDate).HeaderText("End Date").DataType("date").Width("150px").DateDisplayType(DateDisplayType.UTC);
}
)
.PrimaryKey("ProjectId")
.DataSourceUrl(Url.Action("GetData"))
.Render()
)
Ignite UI for MVC 16.2 以前:
@(Html.Infragistics().Grid(Model)
.ID("Grid1")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.EnableUTCDates(true)
.Columns(column =>
{
column.For(project => project.ProjectId).HeaderText("Project ID").DataType("number").Width("100px");
column.For(project => project.Name).HeaderText("Name").DataType("string ").Width("200px");
column.For(project => project.IsPostponed).HeaderText("Is Postponed?").DataType("bool").Width("100px");
column.For(project => project.StartDate).HeaderText("Start Date").DataType("date").Width("150px");
column.For(project => project.EndDate).HeaderText("End Date").DataType("date").Width("150px");
}
)
.PrimaryKey("ProjectId")
.DataSourceUrl(Url.Action("GetData"))
.Render()
)
17.1 グリッドでローカル時間を表示:
$('#Grid1').igGrid({
dataSource: 'http://localhost:3000/testData',
dataSourceType: 'json',
responseDataKey: 'Records',
columns: [
{ key: 'ProjectId', dataType: 'number', headerText: 'Project ID', width: '100px' },
{ key: 'Name', dataType: 'string', headerText: 'Name', width: '150px' },
{ key: 'IsPostponed', dataType: 'bool', headerText: 'Is Postponed?', width: '100px' },
{ key: 'StartDate', dataType: 'date', headerText: 'Start Date', width: '190px', format: 'dateTime', dateDisplayType: 'local' },
{ key: 'EndDate', dataType: 'date', headerText: 'End Date', width: '200px', format: 'dateTime', dateDisplayType: 'local' }
]
});
16.2 と同じ構成:
$('#Grid1').igGrid({
dataSource: 'http://localhost:3000/testData',
dataSourceType: 'json',
responseDataKey: 'Records',
enableUTCDates: false,
columns: [
{ key: 'ProjectId', dataType: 'number', headerText: 'Project ID', width: '100px' },
{ key: 'Name', dataType: 'string', headerText: 'Name', width: '150px' },
{ key: 'IsPostponed', dataType: 'bool', headerText: 'Is Postponed?', width: '100px' },
{ key: 'StartDate', dataType: 'date', headerText: 'Start Date', width: '190px', format: 'dateTime' },
{ key: 'EndDate', dataType: 'date', headerText: 'End Date', width: '200px', format: 'dateTime' }
]
});
Ignite UI for MVC 17.1 以後:
.ID("Grid1")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.Columns(column =>
{
column.For(project => project.ProjectId).HeaderText("Project ID").DataType("number").Width("100px");
column.For(project => project.Name).HeaderText("Name").DataType("string ").Width("200px");
column.For(project => project.IsPostponed).HeaderText("Is Postponed?").DataType("bool").Width("100px");
column.For(project => project.StartDate).HeaderText("Start Date").DataType("date").Width("150px").DateDisplayType(DateDisplayType.Local);
column.For(project => project.EndDate).HeaderText("End Date").DataType("date").Width("150px").DateDisplayType(DateDisplayType.Local);
}
)
.PrimaryKey("ProjectId")
.DataSourceUrl(Url.Action("GetData"))
.Render()
)
Ignite UI for MVC 16.2 以前:
@(Html.Infragistics().Grid(Model)
.ID("Grid1")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.EnableUTCDates(false)
.Columns(column =>
{
column.For(project => project.ProjectId).HeaderText("Project ID").DataType("number").Width("100px");
column.For(project => project.Name).HeaderText("Name").DataType("string ").Width("200px");
column.For(project => project.IsPostponed).HeaderText("Is Postponed?").DataType("bool").Width("100px");
column.For(project => project.StartDate).HeaderText("Start Date").DataType("date").Width("150px");
column.For(project => project.EndDate).HeaderText("End Date").DataType("date").Width("150px");
}
)
.PrimaryKey("ProjectId")
.DataSourceUrl(Url.Action("GetData"))
.Render()
)
注: デフォルトの Ignite UI for MVC Grid がサーバー形式で日付を表示します。初期化が Ignite UI for MVC で実行されない場合、デフォルト動作でローカル時間を表示します。
クライアント日付を表示する方法の詳細については、Ignite UI for jQuery コントロールを別のタイム ゾーンで使用トピックの「サーバー日付を無視してクライアント側の日付を表示」セクションを参照してください。
オンラインで表示: GitHub