日期范围

使用场景

当页面需要输入一个日期区间，您可以使用日期范围组件。

使用说明

日期范围组件通过两个日期来表示一个日期区间。

使用示例

1. 从组件面板拖拽日期范围组件至画布。

2. 在新增变量对话框中，完成变量类型（需为List<Date>类型的变量）和分类等配置后，单击保存。其中，变量名称设置为 dateRange，分类选择页面变量。

3. 您可按需设置日期范围组件显示的格式，您也可以为其设置尺寸、状态等。可选的显示格式包括 YYYY、YYYY-MM、YYYY-MM-DD、YYYY-MM-DD HH:mm 和 YYYY-MM-DD HH:mm:ss。

4. 设置校验。

   日期范围作为表单组件使用，需设置校验是否必填、提示信息和自定义校验等信息。开启校验必填开关，在提示信息中输入请选择日期范围。如需自定义校验逻辑，可开启自定义校验并编辑校验代码。

5. 在页面右侧，选择事件 > 新建动作，其动作设置有onChange值发生改变时、onOK点击确认按钮和onVisbleChange弹层展示状态变化三种。

   • 选择onChange值发生改变时动作。

     1. 在onChange值发生变化时对话框中，单击确定。在弹出的事件绑定弹窗中，响应动作选择页面 JS，选中添加新动作，在动作名称中输入名称（如 onChange2），然后单击确定完成创建。

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

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

        /**
         * 私有函数，只能JS面板内部调用
         */
        function printLog(obj) {
            console.info(obj);
        }
        /**
         * 页面内的函数，可以被页面内任何位置调用
         */
        export function helloPage() {
            console.log('hello page');
        }
        /**
         * 日期范围 值发生改变时
         * @param value 选中的值
         */
        export function onChange(value){
            console.log(value);
        }

   • 日期范围组件单击确定时，平台会触发onOK点击确认按钮函数，添加方式请参见选择onChange值发生改变时的相关配置步骤。

   • 日期范围组件弹层展示状态变化时，平台会执行onVisbleChange弹层展示状态变化函数，添加方式请参见选择onChange值发生改变时的相关配置步骤。