🧬 组装组件
日期是什么？
日期组件是一个允许用户从日历接口选择日期的组件。 日期组件通常用于用户需要选择特定日期的表单或数据输入接口。
当一个日期组件添加到画布时，它默认显示一个日历接口。 用户可以通过点击上一个或下一个箭头移动到另一个月来浏览日历。 或者点击指定日期来选择它。 选中的日期将显示在输入框中。
属性
日期可用的属性。 JavaScript 可以被写入阅读或更改组件信息。
| 属性 | 描述 |
|---|---|
| 默认值 | 组件的初始值。 您可以在 {{}} 中输入JavaScript 动态更改初始值。 |
| 格式 | 有效的日期格式字符串。 见dayJS。 |
| 占位符 | 当输入字段为空时，值将显示。 |
| 最大日期 | 设置用户可以从日历接口中选择的最大日期。 |
| 最小日期 | 指定用户可以从日历接口中选择的最早日期。 |
| 标签 | 显示给用户的字段名称 |
| 标题 | 详细描述字段的标题 |
| 隐藏标签 | 设置是否显示标签 |
| 位置 | 设置标签相对于组件的位置 |
| 对齐 | 设置标签的对齐(对齐到左或右) |
| 宽度 | 当标签位于组件左侧时，设置标签的宽度。 |
| 事件处理程序 | 响应组件事件触发查询、控制组件或调用其他API。 |
| 已禁用 | 控制组件是否被禁用的状态。 当组件被禁用时，它不能被修改或聚焦。 |
| 只读 | 控制组件是否为只读状态. 一个只读组件可以被选择和集中，但不能被修改。 |
| 工具提示 | 用户可以在此输入组件工具提示。 工具提示将在其焦点时显示。 支持Markdown 格式。 |
| 显示清除按钮 | 控制是否在输入字段中显示清除按钮 |
| 必填字段 | 只有当开启开关时才有效。 |
| 自定义规则 | 在此创建您的验证逻辑。 规则应该在 JavaScript 中制定，并且由 {{}} 涵盖。 |
| 隐藏验证消息 | 当输入值不正确时，您可以通过切换隐藏状态来隐藏错误消息。 您可以用JavaScript动态地更改隐藏状态。 |
| 表单数据键 | 在构建数据属性时指定包装表单组件的键值。 |
| Hidden | 动态控制组件是否隐藏。 您可以通过动态布尔值更改隐藏状态。 |
| 主题颜色 | 允许用户指定按钮的背景颜色和不透明度 |
方法
您可以使用其他组件来控制组件。 我们支持以下四种方法：
- setValue 值
要设置输入的日期值，例如 {{‘value1’}}
| 属性 | 描述 |
|---|---|
| 值 | Input value |
- clearValue
清除选中组件的值
- validate
验证输入信息是合法的
- 清除验证
清除验证消息
事件处理程序
| 事件 | 描述 |
|---|---|
| 更改 | 当用户更改选中的日期值时，执行用户定制的特定操作。 |
数据
组件有一些常用的数据，可以通过应用程序中的 {{componentName.propertyName}} 调用。
| 属性名称 | 描述 |
|---|---|
| 颜色方案 | 日期颜色属性 |
| 自定义规则 | 用户指定的自定义规则 |
| 日期格式 | 日期格式 |
| 已禁用 | 一个布尔值表示禁用状态 |
| 显示名称 | 此组件的名称 (如 按钮1) |
| formDataKey | 表单数据键日期 |
| hidden | 隐藏状态 (true 或 false) |
| 隐藏验证消息 | 一个布尔值表示验证消息是否隐藏 |
| 标签 | 标签值 |
| 标签对齐 | 切换标签对齐(向左或向右) |
| 标签位置 | 切换标签的位置(左侧或右侧) |
| 标签宽度 | 代表标签宽度的整数。 |
| 标签已满 | 一个布尔值表示标签是否满。 |
| maxDate | 最大日期的值 |
| minDate | 最小日期值 |
| 占位符 | 占位符值 |
| 只读 | 一个布尔值表示输入的准备状态。 |
| 必填 | 一个布尔值表示输入的必填状态。 |
| 显示清除 | 一个布尔值表示将显示清除日期 |
| 工具提示文本 | 工具提示文本的值 |
| 值 | Input value |
示例： {{date1.value}}
使用大小写
接下来，我们将演示如何从数据源映射到目前的数据，并用按钮设置为当前的日期。
步骤 1 添加动作
让我们在REST API 中创建一个叫做promoteCodes 包括6列：code、id、createdAt、expireedAt、startedAt、updatedAt**。 我们将随时使用更新的样本。
然后我们可以从行动列表中创建一个新的 REST API 动作，列出促销代码中的所有数据，并命名respi1。
点击 `保存 和 Run 激活此操作。
步骤 2 添加组件
接下来，我们可以将 date 组件和 buton 组件添加到画布中。 对于日期组件的默认值，我们将其设置为首次从其余api数据中推广代码的最后更新时间。
{{restapi1.data.promoteCodes[0].updatedAt}}我们还将按钮标为“今日”
步骤 3 配置组件
在 按钮 组件中，我们可以配置它来设置日期在 日期 组件中的日期到今天。
- 在编辑事件处理器中，选择
控制组件* 在动作中，选择你想要更新的日期** 组件作为事件的目标。 - 选择
setValue动作并设为{{currentUserInfo.updatedAt}}
步骤4 测试
现在当您点击“今天”按钮时，时间应该更改为今天的日期。 关于这一点，我们有2023-5-6年，但在你测试时可能不同。
