## 需求说明

页面载入时默认查询指定日期范围的数据，有个接口会返回日期范围，需要通过js修改查询条件日期的值进行搜索

![](./files/Pasted%20image%2020260421151820.png)

## 实现思路

需要修改查询条件字段的值，然后触发搜索，这个查询字段用的是WeaDateGroup组件，一般这种改变时触发动作的都是需要调用组件的 onChange() 来实现，所以需要调用该组件的 onChange() 函数，来执行修改字段值并触发搜索

## 具体步骤

1.我们需要知道onChange具体的参数是什么，先复写该组件，然后在onChange函数里调用原组件里的onChange，进行debugger

![](./files/Pasted%20image%2020260421151829.png)
![](./files/Pasted%20image%2020260421151836.png)
2.调试看到了onChange的具体参数，为一个数组，数组第一个元素是日期字段选项的值，第二个是开始日期，第三个是结束日期

![](./files/Pasted%20image%2020260421151846.png)

3.知道了onChange的具体参数之后就知道怎么调用onChange了，通过复写组件参数来获取到onChange，向window对象添加一个函数，用来调用该组件的onChange

```javascript
ecodeSDK.overwritePropsFnQueueMapSet('WeaDateGroup',{
  fn:(props)=>{
    if(location.href.includes('/main/cube/search?customid=588')){
      window.changeSearchConditon = (startDate,endDate)=>{
        props.onChange(['6',startDate,endDate]);
      }
    }
  }
});
```

4.就可以在其它地方调用到该组件的onChange了，例如在控制台中调用，回到我们的需求，在接口返回日期范围时调用changeSearchConditon()并传入开始日期和结束日期即可

![](./files/Pasted%20image%2020260421151901.png)

## 源码

![修改日期查询条件执行查询.zip](./files/修改日期查询条件执行查询.zip)