Time（时间）¶

The Time Widget category consist of the following widgets:

Calendar
Date picker
Date range picker
Timeline

The following tables offer usage details about the properties available to Calendar widgets.

Properties¶

Attribute	Description	Type	Required	Changed By
areEventsAllDay	An Array of booleans that determine if the corresponding events are all-day events. All day events will appear in the “all-day” section of the views, and will only appear on days that are fully within the start and end times. Additionally, When all-day events are selected, their start and end times will reflect the adjusted time boundaries. For example: An all-day event from “January 1st 03:00” to “January 3rd 03:00” will render as “January 1st 00:00” to “January 3rd 00:00”.If left empty, events will default to All Day = false.	json	No	Direct Edit
dateRangeEnabled	Adds the date range as a title for the Calendar that corresponds to the current view. This will be the day, week, or month currently displayed depending on the view.	string	Yes	Direct Edit
defaultDate	The date that the calendar will default to on page load. If set to the empty string this will default the view to “today” thus causing the range to match the current date on page load.	string	Yes	User Interaction
eventEnds	The end times of each event.	json	Yes	Direct Edit
eventNames	The names to display on each event.	json	Yes	Direct Edit
eventSeries	An Array of labels (strings) that group events into series for styling. If left empty, events will be displayed using the default styles.	json	No	Direct Edit
eventStarts	The start times of each event.	json	Yes	Direct Edit
pagingEnabled	Adds buttons which enable movement forwards and backwards by the current interval displayed, as well as a button to return to the current date.	boolean	Yes	Direct Edit
pagingYearEnabled	Adds additional buttons which enable moving the currently viewed time range forwards or backwards by a full year	boolean	Yes	Direct Edit
selectedIndex	The index of the event selected on the calendar. “null” if no event selected	number	Yes	User Interaction
viewDefault	The view type (day, week, month) which will be rendered on application load. The dates displayed in this view are determined by the value of “defaultDate”. This defaults to the “Month” view.	string	Yes	User Interaction
viewType	Controls the views accessible via the Day & Week buttons if they are enabled. When the type is set to “List” events will display as a list of items on in the order they are given to the widget, rather than in the order of their start times. When the type is set to “Time” events will display as blocks spanning the hours during which the event occurs. The display type has no effect on the Month view.	string	Yes	Direct Edit
viewSwitchingEnabled	Enables/Disables the buttons for switching between day/week/month views. By default these buttons are enabled.	boolean	Yes	Direct Edit

The following tables offer usage details about the properties available to Date Picker widgets. Several examples follow the tables.

Properties¶

Attribute	Description	Type	Required	Changed By
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
displayFormat	Format to use for displaying the selection in the picker’s input box. Must be a valid moment.js format ↗.	string	No	Direct Edit
maxDate	The maximum selectable date, formatted as a string. If left blank, then the default maximum date is used (Dec. 31st of this year). The date must be formatted using the ISO 8601 standard ↗.	string	No	Direct Edit
minDate	The minimum selectable date, formatted as a string. If left blank, then the default minimum date is used (Jan. 1st, 20 years in the past). The date must be formatted using the ISO 8601 standard ↗.	string	No	Direct Edit
placeholder	The text to use as a placeholder when no date is selected.	string	Yes	Direct Edit
timeEnabled	Specifies whether or not a time picker should be shown with the date picker.	boolean	Yes	Direct Edit
timePickerPrecision	Determines what the precision of the time picker should be.	number	Yes	Direct Edit
value	The current selection formatted as a string.	string	Yes	User Interaction
valueFormat	The output string format for the “value” field. Must be a valid moment.js format ↗. If not provided or set to null, ISO 8601 formatting will be used.	string	No	Direct Edit

Examples¶

Date Picker¶

{
  "disabled": false,
  "displayFormat": "MM/DD/YYYY",
  "timeEnabled": false,
  "value": "2014-09-10T05:00:00.000Z"
}

Date Picker with time enabled¶

{
  "disabled": false,
  "timeEnabled": true,
  "value": "2014-09-10 13:00",
  "valueFormat": "YYYY-MM-DD HH:mm"
}

Defaults¶

{
  "disabled": false,
  "timeEnabled": false,
  "value": "",
  "valueFormat": "YYYY-MM-DD"
}

The following tables offer usage details about the properties available to Date Range Picker widgets. Several examples follow the tables.

Properties¶

Attribute	Description	Type	Required	Changed By
disabled	Specifies whether the user can interact with the widget. Defaults to false. Values are typically templated expressions that produce booleans (e.g. “{{w1.on}}”).	boolean	Yes	Direct Edit
displayFormat	Format for displaying the dates. Must be a valid moment.js format ↗.	string	No	Direct Edit
fromDateValue	The current ‘from’ date selection, formatted as a string. The date must be formatted using the ISO 8601 standard ↗.	string	Yes	User Interaction
maxDate	The maximum date the user can select in the date picker, formatted as a string. If left blank, then the default maximum date is used (Dec. 31st of this year). The date must be formatted using the ISO 8601 standard ↗.	string	No	Direct Edit
minDate	The minimum date the user can select in the date picker, formatted as a string. If left blank, then the default minimum date is used (Jan. 1st, 20 years in the past). The date must be formatted using the ISO 8601 standard ↗.	string	No	Direct Edit
shortcutLabels	Names of the shortcut ranges to display when shortcuts are shown, e.g. ‘Last 3 Days’ or ‘Last 3 Months’. If no labels are given, then the default shortcut ranges and labels are used.	string[]	Yes	Direct Edit
shortcutRanges	Date ranges for each shortcut. Each range must be formatted using the ISO 8601 standard ↗[from_date_string, to_date_string], e.g. [‘2016-05-01’, ‘2016-05-10’] or [‘2016-05-01 16:00’, ‘2016-05-01 18:00’]	string[][]	No	Direct Edit
shortcutsEnabled	Determines whether date range shortcuts (e.g. Last 3 Days, Last 3 Months, etc.) are shown.	boolean	No	Direct Edit
toDateValue	The current ‘to’ date selection, formatted as a string. The date must be formatted using the ISO 8601 standard ↗.	string	Yes	User Interaction
timeEnabled	Specifies whether a time picker should be shown with the date picker.	boolean	Yes	Direct Edit
timePickerPrecision	Determines the precision of the time picker.	number	Yes	Direct Edit

Examples¶

Date Range Picker¶

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

Date Range Picker with time and shortcuts enabled¶

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

Defaults¶

{
  "disabled": false,
  "displayFormat": "YYYY-MM-DD",
  "fromDateValue": null,
  "shortcutsEnabled": false,
  "timeEnabled": false,
  "timePickerPrecision": 0,
  "toDateValue": null
}

The following tables offer usage details about the properties available to Timeline widgets. Several examples follow the tables.

Properties¶

Attribute	Description	Type	Required	Changed By
cssClasses	An array of class names, each to be added to its respective event on the timeline.	string[]	No	Direct Edit
dates	An array of dates, denoting the events to display on the timeline. Will be displayed in the order provided.	any[]	Yes	Direct Edit
details	Supporting details to be displayed underneath corresponding event title.	string[]	No	Direct Edit
titles	The names/titles of the events to be displayed on the timeline.	string[]	Yes	Direct Edit

Examples¶

Timeline¶

{
  "cssClasses": [
    "green",
    "red",
    "green"
  ],
  "dates": "{{query1.dates}}",
  "details": [
    "this first event was spectacular",
    null,
    "the third event was alright"
  ],
  "titles": "{{query1.titles}}"
}

Defaults¶

{
  "cssClasses": [],
  "dates": [],
  "details": [],
  "titles": []
}

中文翻译¶

时间¶

时间（Time）组件类别包含以下组件：

日历
日期选择器
日期范围选择器
时间线

日历组件¶

下表提供了日历（Calendar）组件可用属性的使用详情。

属性¶

属性	描述	类型	必填	变更方式
areEventsAllDay	布尔值数组，用于确定相应事件是否为全天事件。全天事件将显示在视图的"全天"区域，且仅会出现在完全包含在开始和结束时间内的日期上。此外，当选中全天事件时，其开始和结束时间将反映调整后的时间边界。例如：从"1月1日03:00"到"1月3日03:00"的全天事件将显示为"1月1日00:00"到"1月3日00:00"。如果留空，事件将默认设置为全天 = false。	json	否	直接编辑
dateRangeEnabled	将日期范围添加为日历的标题，对应当前视图。根据视图不同，将显示当前显示的日、周或月。	string	是	直接编辑
defaultDate	页面加载时日历默认显示的日期。如果设置为空字符串，视图将默认为"今天"，从而使范围在页面加载时匹配当前日期。	string	是	用户交互
eventEnds	每个事件的结束时间。	json	是	直接编辑
eventNames	每个事件上显示的名称。	json	是	直接编辑
eventSeries	标签（字符串）数组，用于将事件分组为系列以便设置样式。如果留空，事件将使用默认样式显示。	json	否	直接编辑
eventStarts	每个事件的开始时间。	json	是	直接编辑
pagingEnabled	添加按钮，支持按当前显示的时间间隔向前和向后移动，以及返回当前日期的按钮。	boolean	是	直接编辑
pagingYearEnabled	添加额外按钮，支持将当前查看的时间范围向前或向后移动一整年。	boolean	是	直接编辑
selectedIndex	日历上选中事件的索引。如果未选中事件则为"null"。	number	是	用户交互
viewDefault	应用加载时渲染的视图类型（日、周、月）。此视图中显示的日期由"defaultDate"的值决定。默认为"月"视图。	string	是	用户交互
viewType	控制通过"日"和"周"按钮（如果启用）可访问的视图。当类型设置为"列表"时，事件将按照提供给组件的顺序显示为项目列表，而非按其开始时间的顺序。当类型设置为"时间"时，事件将显示为跨越事件发生小时数的块。显示类型对月视图没有影响。	string	是	直接编辑
viewSwitchingEnabled	启用/禁用在日/周/月视图之间切换的按钮。默认情况下这些按钮是启用的。	boolean	是	直接编辑

日期选择器组件¶

下表提供了日期选择器（Date Picker）组件可用属性的使用详情。表格后附有若干示例。

属性¶

属性	描述	类型	必填	变更方式
disabled	指定用户是否可以与组件交互。默认为 false。值通常为产生布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑
displayFormat	用于在选择器的输入框中显示所选内容的格式。必须是有效的 moment.js 格式 ↗。	string	否	直接编辑
maxDate	最大可选日期，格式化为字符串。如果留空，则使用默认最大日期（本年12月31日）。日期必须使用 ISO 8601 标准 ↗ 格式化。	string	否	直接编辑
minDate	最小可选日期，格式化为字符串。如果留空，则使用默认最小日期（过去20年的1月1日）。日期必须使用 ISO 8601 标准 ↗ 格式化。	string	否	直接编辑
placeholder	未选择日期时用作占位符的文本。	string	是	直接编辑
timeEnabled	指定是否在日期选择器中显示时间选择器。	boolean	是	直接编辑
timePickerPrecision	确定时间选择器的精度。	number	是	直接编辑
value	当前选择内容，格式化为字符串。	string	是	用户交互
valueFormat	"value"字段的输出字符串格式。必须是有效的 moment.js 格式 ↗。如果未提供或设置为 null，将使用 ISO 8601 格式。	string	否	直接编辑

示例¶

日期选择器¶

{
  "disabled": false,
  "displayFormat": "MM/DD/YYYY",
  "timeEnabled": false,
  "value": "2014-09-10T05:00:00.000Z"
}

启用时间的日期选择器¶

{
  "disabled": false,
  "timeEnabled": true,
  "value": "2014-09-10 13:00",
  "valueFormat": "YYYY-MM-DD HH:mm"
}

默认值¶

{
  "disabled": false,
  "timeEnabled": false,
  "value": "",
  "valueFormat": "YYYY-MM-DD"
}

日期范围选择器组件¶

下表提供了日期范围选择器（Date Range Picker）组件可用属性的使用详情。表格后附有若干示例。

属性¶

属性	描述	类型	必填	变更方式
disabled	指定用户是否可以与组件交互。默认为 false。值通常为产生布尔值的模板表达式（例如"{{w1.on}}"）。	boolean	是	直接编辑
displayFormat	用于显示日期的格式。必须是有效的 moment.js 格式 ↗。	string	否	直接编辑
fromDateValue	当前的"起始"日期选择，格式化为字符串。日期必须使用 ISO 8601 标准 ↗ 格式化。	string	是	用户交互
maxDate	用户在日期选择器中可选择的最大日期，格式化为字符串。如果留空，则使用默认最大日期（本年12月31日）。日期必须使用 ISO 8601 标准 ↗ 格式化。	string	否	直接编辑
minDate	用户在日期选择器中可选择的最小日期，格式化为字符串。如果留空，则使用默认最小日期（过去20年的1月1日）。日期必须使用 ISO 8601 标准 ↗ 格式化。	string	否	直接编辑
shortcutLabels	显示快捷方式时显示的快捷范围名称，例如"最近3天"或"最近3个月"。如果未提供标签，则使用默认的快捷范围和标签。	string[]	是	直接编辑
shortcutRanges	每个快捷方式的日期范围。每个范围必须使用 ISO 8601 标准 ↗ 格式化[起始日期字符串, 结束日期字符串]，例如 ['2016-05-01', '2016-05-10'] 或 ['2016-05-01 16:00', '2016-05-01 18:00']。	string[][]	否	直接编辑
shortcutsEnabled	确定是否显示日期范围快捷方式（例如最近3天、最近3个月等）。	boolean	否	直接编辑
toDateValue	当前的"结束"日期选择，格式化为字符串。日期必须使用 ISO 8601 标准 ↗ 格式化。	string	是	用户交互
timeEnabled	指定是否在日期选择器中显示时间选择器。	boolean	是	直接编辑
timePickerPrecision	确定时间选择器的精度。	number	是	直接编辑

示例¶

日期范围选择器¶

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

启用时间和快捷方式的日期范围选择器¶

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

默认值¶

{
  "disabled": false,
  "displayFormat": "YYYY-MM-DD",
  "fromDateValue": null,
  "shortcutsEnabled": false,
  "timeEnabled": false,
  "timePickerPrecision": 0,
  "toDateValue": null
}

时间线组件¶

下表提供了时间线（Timeline）组件可用属性的使用详情。表格后附有若干示例。

属性¶

属性	描述	类型	必填	变更方式
cssClasses	类名数组，每个类名将添加到时间线上相应的事件中。	string[]	否	直接编辑
dates	日期数组，表示要在时间线上显示的事件。将按提供的顺序显示。	any[]	是	直接编辑
details	支持性详情，显示在相应事件标题下方。	string[]	否	直接编辑
titles	要在时间线上显示的事件名称/标题。	string[]	是	直接编辑

示例¶

时间线¶

{
  "cssClasses": [
    "green",
    "red",
    "green"
  ],
  "dates": "{{query1.dates}}",
  "details": [
    "第一个事件非常精彩",
    null,
    "第三个事件还可以"
  ],
  "titles": "{{query1.titles}}"
}

默认值¶

{
  "cssClasses": [],
  "dates": [],
  "details": [],
  "titles": []
}

Time（时间）¶

Calendar widget¶

Properties¶

Date Picker widget¶

Properties¶

Examples¶

Date Picker¶

Date Picker with time enabled¶

Defaults¶

Date Range Picker widget¶

Properties¶

Examples¶

Date Range Picker¶

Date Range Picker with time and shortcuts enabled¶

Defaults¶

Timeline widget¶

Properties¶

Examples¶

Timeline¶

Defaults¶

中文翻译¶

时间¶

日历组件¶

属性¶

日期选择器组件¶

属性¶

示例¶

日期选择器¶

启用时间的日期选择器¶

默认值¶

日期范围选择器组件¶

属性¶

示例¶

日期范围选择器¶

启用时间和快捷方式的日期范围选择器¶

默认值¶

时间线组件¶

属性¶

示例¶

时间线¶

默认值¶