Date Range Pickers

If I add 2 Date Range pickers side by side like this

<dmx-datetime id="var-date" interval="days"></dmx-datetime>
<div class="row">
    <div class="mb-3 col-5">
        <label for="order_date_range_filter" class="form-label">Filter By Order Date Range (Private Customer Invoicing)</label>
        <div class="input-group">
            <input class="form-control" id="order_date_range_filter" name="order_date_range_filter" is="dmx-date-range-picker" dmx-bind:disabled="start_date_range_filter.value" dmx-on:apply="sc_db_prepare_for_tripletex.load({},true)" dmx-bind:maxdate="vardate.datetime">
            <button class="btn btn-secondary bi bi-x" dmx-on:click="order_date_range_filter.setValue('')"></button>
        </div>
    </div>
                   
    <div class="mb-3 col-5">
        <label for="start_date_range_filter" class="form-label">Filter By Product Start Date Range (Reseller / Agent Invoicing)</label>
        <div class="input-group">
            <input class="form-control" id="start_date_range_filter" name="start_date_range_filter" is="dmx-date-range-picker" dmx-bind:disabled="order_date_range_filter.value" dmx-on:apply="sc_db_prepare_for_tripletex.load({},true)" dmx-bind:maxdate="vardate.datetime">
            <button class="btn btn-secondary bi bi-x" dmx-on:click="start_date_range_filter.setValue('')"></button>
        </div>
    </div>
</div>

When deployed each time I open either one, the calendars pop open and then close again before I can select any dates, I have to remove the dmx-bind:maxdate="vardate.datetime" on one of them, and then they both work.