日期范围

1. 组件概述

日期范围是一个数据输入组件，用于选择一段时间的起止日期。用户可以通过日历面板分别选择开始日期和结束日期，也可以使用预设的快捷选项（如”最近7天”、“上个月”等）快速选择常用时间段。该组件支持多种日期类型，包括日期、日期时间、时间、月份、季度和年份范围。适用于需要筛选时间段的场景，如查询某段时间内的学习记录、设置活动的有效期、筛选历史对话等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：学习记录查询。在学习辅导类应用中，学生想查看某段时间内的答题记录或学习进度。使用日期范围组件让学生选择查询的时间段，配合快捷键设置”最近7天”、“本月”等常用选项，方便快速筛选。
• 场景二：活动时间设置。在创建知识挑战赛或限时答题活动时，需要设置活动的开始和结束时间。使用日期时间范围类型，配置最小值为当前时间，确保只能选择未来的时间段。

加载中...

查看 JSON

复制 JSON

3. 功能配置

高级

基本折叠组

配置项	说明
绑定变量	组件的变量名，用户选择的日期范围值会以此变量名存储。其他组件可以绑定此变量来获取选中的时间段，调用工作流时此变量的值也会传递给工作流。
结束时间绑定变量	可选配置。默认情况下，开始时间和结束时间会合并存储在一个变量中。如果需要将结束时间单独存储到另一个变量，可以在此设置。
标题	显示在组件左侧的标签文字，用于说明该输入项的用途，如”查询时间”、“活动周期”。
日期类型	选择要使用的时间精度类型。可选项包括：日期（只选年月日）、日期时间（精确到时分秒）、时间（只选时分）、月份（只选年月）、季度（只选年和季度）、年份（只选年）。切换类型后，显示格式和值格式会自动调整。
值格式	设置提交数据时的时间格式。默认为”X”（时间戳格式）。常用格式包括：X（秒级时间戳）、x（毫秒时间戳）、YYYY-MM-DD（年-月-日）等。时间戳格式便于后端处理，日期字符串格式便于阅读。
显示格式	设置界面上显示的时间格式。默认为”YYYY-MM-DD”。这只影响用户看到的显示效果，不影响实际提交的数据格式。例如设置为”YYYY年MM月DD日”会显示为”2024年01月15日”。
UTC转换	开启后，提交数据和展示数据将进行UTC时区转换。如果应用的用户分布在不同时区，建议开启此选项以确保时间的一致性。
可清除	开启后，组件右侧会显示清除按钮，用户可以一键清空已选择的日期范围。默认开启。
禁止输入	开启后，用户只能通过日历面板选择日期，不能直接在输入框中手动输入日期。适用于需要严格控制日期格式的场景。
最小值	限制可选择的最早日期。可以设置为固定日期，也可以使用相对值如”now”（当前时间）、“-7days”（7天前）、“-1month”（1个月前）等。设置后，早于此日期的选项会被禁用。
最大值	限制可选择的最晚日期。用法与最小值相同。例如设置为”now”表示只能选择今天及之前的日期，设置为”+30days”表示最多只能选择30天后的日期。
最小跨度	限制所选时间段的最短长度。例如设置为”3days”表示开始日期和结束日期之间至少要间隔3天。适用于需要保证一定时间跨度的场景。
最大跨度	限制所选时间段的最长长度。例如设置为”30days”表示一次最多只能选择30天的范围。适用于需要限制查询范围的场景，避免数据量过大。
快捷键	配置日期选择器中的快捷选项按钮。可以添加”常用跨度”（如今天、昨天、本周、上月等固定选项）和”自定义跨度”（如最近n天、n周以内等可配置数字的选项）。用户点击快捷键可以快速选择对应的时间段，无需手动选择开始和结束日期。
控件提示	在输入控件旁边显示一个小问号图标，鼠标悬停时弹出提示内容。适合放置简短的帮助说明。
标题提示	在标题旁边显示一个小问号图标，鼠标悬停时弹出提示内容。适合解释该字段的用途或填写要求。
前占位提示	开始日期输入框为空时显示的灰色提示文字，默认为”开始时间”。可以修改为更具体的提示，如”选择开始日期”。
后占位提示	结束日期输入框为空时显示的灰色提示文字，默认为”结束时间”。

状态折叠组

配置项	说明
可见	控制组件是否显示。默认可见。可以绑定变量实现根据条件动态显示或隐藏。
隐藏	控制组件是否隐藏。与”可见”相反。
禁用	控制组件是否禁用（变灰且不可操作）。可以绑定变量实现根据条件动态启用或禁用。
静态展示	开启后，组件变为只读的纯文本展示模式，不可编辑。适用于详情页或确认页面。

校验折叠组

配置项	说明
校验规则	配置表单项的校验规则，如必填等。当用户提交表单时，会根据这些规则检查输入是否有效。

设计

其他折叠组

配置项	说明
模式	选择日期选择器的展示方式。“浮层”模式下，点击输入框会弹出日历面板；“内嵌”模式下，日历面板直接显示在页面上，无需点击触发。内嵌模式适用于日期选择是页面核心功能的场景。

事件

事件折叠组

配置项	说明
添加事件	支持”值变化”、“获取焦点”、“失去焦点”三种触发事件。“值变化”事件在用户选择日期后触发，常用于根据选择的时间段自动筛选数据或调用工作流获取对应时间段的内容。“获取焦点”和”失去焦点”事件仅在浮层模式下有效。