Set datepicker min date from another datepicker


Topic: Set datepicker min date from another datepicker

Zxcid asked 4 years ago

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


Marcin Luczak staff answered 4 years ago

Hi,

There is no such event as changeDate. You can check all of Datepicker's events in our events section https://mdbootstrap.com/docs/jquery/forms/date-picker1/#events.

The functionality you want to achieve is described in detail and supported by live preview and code snippet in the relevant section of our documentation for Datepicker https://mdbootstrap.com/docs/jquery/forms/date-picker1/#to-and-from

Regards, Marcin


Zxcid commented 4 years ago

Oh ok, I needed to look for the documentation of the previous versions. That wasn't obvious actually cause I have the v4.19.1 The most recent page lacks few parts of that documentation.
Anyway, thank you so much for your help, that's exactly what I needed.
Zx.


Marcin Luczak staff commented 4 years ago

Thank you for the information about the documentation. We will take a look at this.

Regards, Marcin


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: desktop
  • Browser: chrome
  • OS: win 10
  • Provided sample code: No
  • Provided link: No