Topic: Set datepicker min date from another datepicker

Zxcid free asked 3 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 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>

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( () => {

        max: true,
        inline: true

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

    $("#date-picker-to").datepicker().on('changeDate', (selected) => {
        var minDate = new Date(;
        $('#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 3 years ago


There is no such event as changeDate. You can check all of Datepicker's events in our events section

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

Regards, Marcin

Zxcid free commented 3 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.

Marcin Luczak staff commented 3 years ago

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

Regards, Marcin

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: 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