时间

时间微件类别包括以下微件：

• 日历
• 日期选择器
• 日期范围选择器
• 时间轴

---

日历微件

下表提供了关于日历微件可用属性的使用详情。

属性

---

日期选择器微件

下表提供了关于日期选择器微件可用属性的使用详情。表格后面是几个例子。

属性

示例

日期选择器

Copied!
1
2
3
4
5
6
{
  "disabled": false,  // 控件是否禁用，false表示启用
  "displayFormat": "MM/DD/YYYY",  // 日期显示格式为月/日/年
  "timeEnabled": false,  // 是否启用时间功能，false表示不启用
  "value": "2014-09-10T05:00:00.000Z"  // 日期时间的ISO 8601格式字符串
}

启用时间的日期选择器

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" // 值的格式为年-月-日
}

---

日期范围选择器微件

下表提供了日期范围选择器微件可用属性的使用详情。表格后有几个示例。

属性

示例

日期范围选择器

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"], // Q1 对应日期范围
    ["2016-01-01", "2016-03-31"], // Q2 对应日期范围
    ["2016-04-01", "2016-06-30"], // Q3 对应日期范围
    ["2016-07-01", "2016-09-30"]  // Q4 对应日期范围
  ],
  "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, // 是否禁用日期选择器，false 表示不禁用
  "displayFormat": "YYYY-MM-DD", // 日期显示格式为年-月-日
  "fromDateValue": null, // 起始日期值，null 表示未设置
  "shortcutsEnabled": false, // 是否启用快捷方式，false 表示不启用
  "timeEnabled": false, // 是否启用时间选择，false 表示不启用
  "timePickerPrecision": 0, // 时间选择精度，0 表示无时间选择
  "toDateValue": null // 结束日期值，null 表示未设置
}

---

时间线微件

下表提供了时间线微件可用属性的使用详情。表格后面有几个示例。

属性

示例

时间线

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "cssClasses": [
    "green",  // 绿色
    "red",    // 红色
    "green"   // 绿色
  ],
  "dates": "{{query1.dates}}",  // 日期
  "details": [
    "this first event was spectacular",  // 第一个事件非常精彩
    null,  // 空值
    "the third event was alright"  // 第三个事件还行
  ],
  "titles": "{{query1.titles}}"  // 标题
}

Copied!
1
2
3
4
5
6
{
  "cssClasses": [], // 存储CSS类名的数组
  "dates": [], // 存储日期的数组
  "details": [], // 存储详细信息的数组
  "titles": [] // 存储标题的数组
}