时间选择

使用场景

当页面需要输入一个时间，您可以使用时间选择组件。

使用说明

时间选择组件支持选择时、分、秒。如果您需选择年、月、日，则可使用日期组件。

使用示例

1. 从组件面板拖拽时间选择组件至画布。

2. 在新增变量对话框中，完成变量类型（需为Date类型的变量）和分类等配置后，单击保存。

   时间选择组件需要绑定Date类型的变量。其中，分类选择页面变量。保存后，在右侧属性面板的绑定变量下拉框中选择已创建的 Date 类型变量。

3. 您可按需设置时间选择显示的格式，您也可以为其设置尺寸、状态等。可选的显示格式包括 HH、HH:mm、mm:ss、HH:mm:ss。

4. 设置校验。

   时间选择作为表单组件使用，需设置校验是否必填、提示信息和自定义校验等信息。在属性配置面板底部的校验分区中，可配置校验必填开关、提示信息输入框和自定义校验开关。

5. 设置事件。

   在画布右侧，您可以参考以下步骤配置。

   • 选择事件 > 新建动作 > onChange值发生改变时。

     1. 在onChange值发生变化时对话框中，单击确定。在弹窗的响应动作区域选择页面 JS页签并选中添加新动作，动作名称输入 onChange，默认代码模板为 function onChange(value){ console.log(value); }，单击确定。

     2. 在动作面板页面，您可按需添加Javascript代码。

        组件数值发生改变时平台会执行onChange函数。

        例如，为时间选择组件编写 export function onChange3(value) 函数，该函数对应右侧事件面板中的值发生变化时事件。

   • 选择事件 > 新建动作 > onVisibleChange弹层展示状态变化。

     1. 在onVisibleChange弹层展示状态变化对话框中，单击确定。

     2. 在动作面板页面，您可按需添加Javascript代码。

        时间选择组件弹层展示状态变化时平台会执行onVisibleChange函数。