Problem with generated class names

I have server generated html (there is now way to change that) where element ids contains colon, like this "view:_id1:_id67:startdate". MDB JavaScript generates class names from those ids like this "datepicker-dropdown-container-datepicker-toggle-view:_id1:_id67:startdate". Result is such that .querySelector() function, which is heavily used in MDB doesn't work because it is not valid selector. Are there any workarounds in such situation or MDB is not usable in our case? I tried to override querySelector function to escape colon, but its not a good idea and can break other things.

Resources (screenshots, code snippets etc.) Server generated input div

<div id="view:_id1:_id67:startdate" class="form-outline mb-4" data-mdb-datepicker-init="" data-mdb-input-init="" data-mdb-inline="true" data-mdb-start-day="1" data-mdb-format="dd.mm.yyyy" data-mdb-input-initialized="true" data-mdb-datepicker-initialized="true">
<input type="text" value="12.09.2024" id="view:_id1:_id67:dpicker" name="view:_id1:_id67:dpicker" autocomplete="off" class="form-control form-icon-trailing active" data-mdb-toggle="datepicker">
<label id="view:_id1:_id67:label2" for="view:_id1:_id67:inputText2" class="form-label" style="margin-left: 0px;">Izvēlies datumu</label>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 96.8px;"></div>
<div class="form-notch-trailing"></div>
</div>
    <button id="datepicker-toggle-view:_id1:_id67:startdate" type="button" class="datepicker-toggle-button" data-mdb-toggle="datepicker">
      <i class="far fa-calendar datepicker-toggle-icon"></i>
    </button>
</div>

Generated date picker div

<div class="datepicker-dropdown-container datepicker-dropdown-container-datepicker-toggle-view:_id1:_id67:startdate" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(294px, 207px);" data-popper-placement="bottom-start">