时间选择器

文档基于时间选择器v1.1.5版本

组件说明

时间选择器可自主选择时间结点,时间精确到年/月/日 时:分:秒,用户可选择日期和时间任意搭配,满足各时间段的选择,通常与图表类组件配置交互。

效果案例

*时间选择器 效果案例

一、样式

在样式中可以设置组件的基本属性全局样式数据系列

1、基本属性

位置尺寸

位置包括组件的横坐标纵坐标,单位为px;横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度高度,单位为px;可单击比例锁锁定组件宽高比,等比例调整组件的宽高,比例锁默认不锁定。

基本柱状图组件尺寸不影响组件内容显示、组件动画。

默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发,通常用来配合显隐控制。

2、全局

全局配置中可以调整组件日期格式、时间格式、起始时间、结束时间、截至当前时间、始终显示下拉框

配置项

说明

日期格式

提供日期格式,如年-月-日

时间格式

提供时间格式,如时:分:秒

起始时间

时间选择范围的起始时间

结束时间

时间选择范围的结束时间

截至当前时间

默认关闭,开启后时间范围始终截至当前时间。

始终显示下拉框

默认关闭,开启后始终显示下拉框。

注意:起始/结束时间的优先级:数据输入 > 全局配置项

3、选择器

选择器配置中可以调整组件文字样式、缩进、背景色、边框

配置项

说明

文字样式

当有特定字体需求时,对显示字体进行调整,可以对字体、字体大小、字体颜色、加粗、斜体、字距、行距进行设置。

缩进

用来调整时间文本的缩进量,以px为单位在“选择器框内”置前缩进。

背景色

可自定义设置选择器背景颜色。

边框

选择器描边程度,可自主选择默认颜色和激活颜色


4、日历框

日历框配置中可以调整组件间距、位置类型、背景色、主题色块、样式、按钮

开启默认显示后,日历框会保持显示状态。

配置项

说明

位置

可以设置为在选择器上方下方

间距

日历框和选择器的间距

布局

日历框布局支持居左、居右、自适应,其中前两者支持自定义设置框尺寸大小,自适应尺寸则与选择器同宽

高度

可以自定义设置日历框高度数值,单位为px。

背景色

可自定义设置日历框背景颜色

主题色块

可自定义设置选中色块颜色

样式

支持配置日历框内文本样式及装饰线样式

按钮

支持配置日历框内按钮文本样式


二、数据

组件数据格式

字段

说明

value

时间 【注意:有标准格式要求,可自主调试,如2021-08-31 00:00:00】

startTime

最小时间(非必填项)

endTime

最大时间(非必填项)

*数据格式说明


JSON数据案例

[
	{
		"startTime": "2000-01-01 00:00:00",
		"value": "2021-08-31 00:00:00",
		"endTime": "2040-01-01 00:00:00"
	}
]

数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

三、交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时,则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项:

配置项

说明

渐隐渐显

启用是

速率

匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))

方向

动画方向

持续时间

载入动画持续时间,单位为ms

延时

载入动画延时长,单位为ms

回调参数

回调参数即为全局性的参数变量,用于控制组件之间参数的传递,可通过设置回调参数来实现数据驱动交互。

其中,此处默认将时间参数做变量传出,变量名即对字段值的重命名。

详细的回调参数教学👉 回调的使用


自定义事件

简单而言,自定义事件通过事件类型+条件去控制其他组件的不同状态。

自定义事件为「交互事件」的增强模块,支持通过数据驱动组件状态、或变更组件样式配置,也可自定义编辑复杂的条件逻辑。

其中,该组件事件类型支持 [时间变化] 做交互驱动:

详细的自定义事件教学👉自定义事件教学

实操demo


欢迎您在评论区留下您对该组件的意见,管理员会及时回复您,如长时间未回复欢迎您搜索钉钉群:33782396或者扫描以下二维码添加微信群说出您的想法,采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求:https://jinshuju.net/f/XyCXU0

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群