Topic: Events don't fire on datepicker control

DashMarketingGroup priority asked 4 months ago


I am trying to capture the close event on the datepicker control using the following code:

        <div class="row mb-4">
        <div class=" col-lg-4">
            <div class="form-outline datepicker" data-mdb-datepicker-init data-mdb-disable-future="true" data-mdb-input-init data-mdb-format="mm/dd/yyyy">
              <input type="text" class="form-control" style="width:200px !important;" id="dtStartDate" placeholder="mm/dd/yyyy" />
              <label for="dtStartDate" class="form-label">Select Start Date</label>
            </div>
        </div>
        <div class="col-lg-4">&nbsp;</div>
        <div class=" col-lg-4">
            <div class="form-outline datepicker" data-mdb-datepicker-init data-mdb-disable-future="true" data-mdb-input-init data-mdb-format="mm/dd/yyyy">
              <input type="text" class="form-control" style="width:200px !important;" id="dtEndDate" placeholder="mm/dd/yyyy" />
              <label for="dtEndDate" class="form-label">Select End Date</label>
            </div>
        </div>

    </div>
</div>
<script>
    $(document).ready(function () {
        const myDatepicker = document.querySelector('#dtStartDate')
        myDatepicker.addEventListener('close.mdb.datepicker', (e) => {
            alert('Date has been changed')
        })
    });

</script>

As you can see, there are 2 datepicker controls on the page for the user to select the starting and ending dates. I am testing the close event on the first control, dtStartDate, but when I open the datepicker, pick a date and then close it, nothing happens. There are no error messages in the console, but it also doesn't fire the close event code. What did I miss?


Grzegorz Bujański staff answered 4 months ago


The event does not fire because you attach the event to the wrong element. Attach the event to an element with the .datepicker class

<div id="dtStartDateDatepicker" class="form-outline datepicker" data-mdb-datepicker-init data-mdb-disable-future="true" data-mdb-input-init data-mdb-format="mm/dd/yyyy">
  <input type="text" class="form-control" style="width:200px !important;" id="dtStartDate" placeholder="mm/dd/yyyy" />
  <label for="dtStartDate" class="form-label">Select Start Date</label>
</div>


const myDatepicker = document.querySelector('#dtStartDateDatepicker')
myDatepicker.addEventListener('close.mdb.datepicker', (e) => {
  alert('Date has been changed')
})


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.3.2
  • Device: Laptop
  • Browser: Chrome
  • OS: Win 11
  • Provided sample code: No
  • Provided link: No