<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

​

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-modal-init data-mdb-target="#exampleModal">

  Launch demo modal

</button>

​

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

        <button type="button" class="btn-close" data-mdb-ripple-init data-mdb-dismiss="modal" aria-label="Close"></button>

      </div>

      <div class="modal-body">

        <div id="datepicker" class="form-outline" data-mdb-datepicker-init data-mdb-input-init>

          <input type="text" class="form-control" id="exampleDatepicker11" />

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

        </div>

      </div>

​

    </div>

  </div>

</div>