<div class="dropdown m-4">

  <button

    class="btn btn-primary dropdown-toggle"

    type="button"

    id="dropdownMenuButton"

    data-mdb-toggle="dropdown"

    aria-expanded="false"

  >

    Dropdown button

  </button>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">

    <li><button class="dropdown-item" id="openDatepicker" href="#">Open datepicker</button></li>

  </ul>

</div>

​

​

<div class="form-outline datepicker m-4" id="myDatepicker">

  <input

    type="text"

    class="form-control"

    id="exampleDatepicker11"

  />

  <label for="exampleDatepicker11" class="form-label">Select a date</label>

</div>

​

const openDatepickerButtonEl = document.querySelector('#openDatepicker')

const datepickerEl = document.querySelector('#myDatepicker')

openDatepickerButtonEl.addEventListener('click', () => {

  mdb.Datepicker.getInstance(datepickerEl).open();

})