Hi everyone, I have two datepickers that should work together as a From -> To range where the max date is always the current date. I would like that when I set a date in the "from" datepicker, in the second (the "to" datepicker) that date would be set as a minimum date. I also would like that if set a date in the "to", that date should be set as a max date in the "from" datepicker.

<div class="form-row">
    <div class="col-4">
        <div id="date-picker-from" class="md-form input-with-post-icon datepicker" inline="true">
            <input placeholder="Select a date" type="text" id="dateFrom" class="form-control">
            <label for="dateFrom">From</label>
            <i class="fas fa-calendar input-prefix"></i>
        </div>
    </div>
    <div class="col-4">
        <div id="date-picker-to" class="md-form input-with-post-icon datepicker" inline="true">
            <input placeholder="Select a date" type="text" id="dateTo" class="form-control">
            <label for="dateTo">To</label>
            <i class="fas fa-calendar input-prefix"></i>
        </div>
    </div>
</div>

Now, I tried to achieve it with this code, but it doesn't work and I think it's because I didn't intercept the right event.

$(document).ready( () => {

    $('.datepicker').datepicker({
        max: true,
        inline: true
    });

    $("#date-picker-from").datepicker().on('changeDate', (selected) => {
        var minDate = new Date(selected.date.valueOf());
        $('#date-picker-to').datepicker('setStartDate', minDate);
    });

    $("#date-picker-to").datepicker().on('changeDate', (selected) => {
        var minDate = new Date(selected.date.valueOf());
        $('#date-picker-from').datepicker('setEndDate', minDate);
    });
})

Is changeDate an event in mdb datepicker? Or where am I wrong? I tried to initialize both of them individually, without the general initialization, but it's not that.

Thanks for the attention