时间选择器
文档基于时间选择器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