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"> </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')
})
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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