時間

時間ウィジェットカテゴリーは以下のウィジェットで構成されています：

• カレンダー
• 日付選択
• 日付範囲選択
• タイムライン

---

カレンダーウィジェット

以下の表は、カレンダーウィジェットで利用可能なプロパティについての使用詳細を提供します。

プロパティ

---

日付選択ウィジェット

以下の表は、日付選択ウィジェットで利用可能なプロパティについての使用詳細を提供します。表の後にはいくつかの例が続きます。

プロパティ

例

日付選択

Copied!
1
2
3
4
5
6
{
  "disabled": false,  // 無効化されているかどうか。falseの場合は有効。
  "displayFormat": "MM/DD/YYYY",  // 表示形式。ここでは月/日/年の形式。
  "timeEnabled": false,  // 時間が有効化されているかどうか。falseの場合は無効。
  "value": "2014-09-10T05:00:00.000Z"  // 実際の値。ここでは日時が示されている。
}

時間が有効な日付ピッカー

Copied!
1
2
3
4
5
6
{
  "disabled": false, // 無効化されていないかどうかを示します。 falseは有効を意味します。
  "timeEnabled": true, // 時間が有効かどうかを示します。 trueは有効を意味します。
  "value": "2014-09-10 13:00", // 指定の値、ここでは日付と時間を示します。
  "valueFormat": "YYYY-MM-DD HH:mm" // 値の形式を示します。ここでは年-月-日 時:分 の形式を示しています。
}

デフォルト

Copied!
1
2
3
4
5
6
{
  "disabled": false, // 無効にするかどうか
  "timeEnabled": false, // 時間を有効にするかどうか
  "value": "", // 値
  "valueFormat": "YYYY-MM-DD" // 値のフォーマット
}

---

Date Range Picker ウィジェット

以下のテーブルでは、Date Range Picker ウィジェットで利用可能なプロパティについての詳細を提供します。テーブルの後にはいくつかの例を示しています。

プロパティ

例

Date Range Picker

Copied!
1
2
3
4
5
6
7
8
9
10
{
  "disabled": false, // 無効にするかどうか
  "displayFormat": "YYYY-MM-DD", // 表示形式
  "fromDateValue": "2016-09-10T05:00:00.000Z", // 開始日時
  "maxDate": "2020-01-01", // 最大日付
  "minDate": "2000-01-01", // 最小日付
  "shortcutsEnabled": false, // ショートカットを有効にするかどうか
  "timeEnabled": false, // 時間を有効にするかどうか
  "toDateValue": "2016-10-10T05:00:00.000Z" // 終了日時
}

タイムとショートカットが有効な日付範囲ピッカー

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "disabled": false,  // 無効にするかどうか
  "displayFormat": "YYYY-MM-DD hh:mm:sss a",  // 表示形式
  "fromDateValue": "2016-09-10T05:13:11.001Z",  // 開始日時の値
  "shortcutLabels": ["Q1", "Q2", "Q3", "Q4"],  // ショートカットのラベル
  "shortcutRanges": [  // ショートカットの範囲
    ["2015-10-01", "2015-12-31"],
    ["2016-01-01", "2016-03-31"],
    ["2016-04-01", "2016-06-30"],
    ["2016-07-01", "2016-09-30"]
  ],
  "shortcutsEnabled": true,  // ショートカットを有効にするかどうか
  "timeEnabled": true,  // 時間を有効にするかどうか
  "timePickerPrecision": 0,  // 時間ピッカーの精度
  "toDateValue": "2016-10-10T05:14:11.002Z"  // 終了日時の値
}

デフォルト

Copied!
1
2
3
4
5
6
7
8
9
{
  "disabled": false, // 無効にするかどうかを表すフラグ
  "displayFormat": "YYYY-MM-DD", // 表示形式
  "fromDateValue": null, // 開始日の値
  "shortcutsEnabled": false, // ショートカットを有効にするかどうかを表すフラグ
  "timeEnabled": false, // 時間を有効にするかどうかを表すフラグ
  "timePickerPrecision": 0, // タイムピッカーの精度（分）
  "toDateValue": null // 終了日の値
}

---

タイムラインウィジェット

以下の表は、タイムラインウィジェットで利用可能なプロパティに関する使用詳細を提供しています。表の後にいくつかの例が続きます。

プロパティ

例

タイムライン

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "cssClasses": [ // CSSクラス
    "green", // 緑色
    "red", // 赤色
    "green" // 緑色
  ],
  "dates": "{{query1.dates}}", // 日付
  "details": [ // 詳細
    "this first event was spectacular", // 最初のイベントは素晴らしかった
    null, // 値なし
    "the third event was alright" // 3つ目のイベントはまあまあだった
  ],
  "titles": "{{query1.titles}}" // タイトル
}

デフォルト

Copied!
1
2
3
4
5
6
{
  "cssClasses": [], // CSSクラス
  "dates": [], // 日付
  "details": [], // 詳細
  "titles": [] // タイトル
}