Pass arguments to the entity_browser iframe url (modal)

I have a form I have a field of type Date Range, I also have another field of type entity_browser(modal) with a selection view widget.

The normal behavior when I click the Button of the entity browser field, is the opening of the modal, if we inspect the code it can be seen similar to this:

<form 
   data-entity-browser-uuid="a9b7680318c9f1a1aca1abc308d8c6d0ac880b4a" 
   data-drupal-selector="entity-browser-event-browser-form" 
   action="/entity-browser/modal/event_browser?uuid=a9b7680318c9f1a1aca1abc308d8c6d0ac880b4a&original_path=/node/add/activity" 
   method="post" 
   id="entity-browser-event-browser-form">....
</form>

What I'm trying to do, is that as the dates are selected, pass these values as arguments to the iframe url something like this:

<form 
   action="/entity-browser/modal/event_browser?uuid=a9b7680318c9f1a1aca1abc308d8c6d0ac880b4&aoriginal_path=/node/add/activity&start=12-02-2022&end=14-02-2022" 
....
</form>

Then from the view take these values and filter the contents.

What i have so far

Reviewing the code of the entity_browser module, I see that the Modal class (Drupal\entity_browser\Plugin\EntityBrowser\Display\Modal), as part of the process hook, this dispatch an event to which one can subscribe.

In fact, i can add parameters to the query argument in this subscription, i have harcoded the values as a test, but they do not render when I refresh the form where I create the content that contains the entity_browser type field.

Example:

public function onAlterEntityBrowserDisplayData(AlterEntityBrowserDisplayData $event) {
    if ($event->getBrowserID() === "event_browser") {
       $data = $event->getData();
     if (isset($data["query_parameters"]["query"])) {
        $data["query_parameters"]["query"]['start'] = '12-02-2022';
        $data["query_parameters"]["query"]['end'] = '14-02-2022';
        $event->setData($data);
      }
    }

  }

If I could get this to work, then I'd have to figure out some way with ajax to keep changing these values as the values in the date field change.

I don't know if this is the best way to do it, I don't know what you think.

Update

The subscription to the event is working, that is, when rendering the content form, the new parameters are added to the iframe url.

The only thing that I would be missing is the update of the parameters via ajax when the values of the date field change.

I can add an ajax callback to the date field that listen when the value changes, I see there is an input field of type hidden where it seems to have the values that entity_browser will use. The problem is that it doesn't have an id to replace the values with.

Example:

<input 
   data-drupal-selector="edit-field-event-entity-browser-entity-browser-path" 
   type="hidden" 
   name="field_evento[entity_browser][entity_browser][path]" 
   value="/entity-browser/modal/event_browser?uuid=1d0cbf414d0af02542405648750ccf4d157438fb&original_path=/node/add/activity&start=12-02-2022&end=14-02-2022"
>

The problem is that it doesn't have an id to replace the values with.

What can be done in these cases?

1. I would suggest creating a custom Entity Reference widget, that extends the one that you are trying to alter.
2. Then use Drupal form states to make your entity reference field conditional, and display it only if the date range is selected.
3. Add JS code that updates the values submitted (add the selected dates) when the entity browser open button is pressed.
4. in hook_form_entity_browser_media_entity_browser_modal_form_alter or hook_inline_entity_form_entity_form_alter or hook_field_widget_WIDGET_TYPE_form_alter do the filtration job.