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