Topic: How to make input (type=date) field trailing icon clickable?
I would like to make the input (type=date) field trailing icon clickable (to toggle my own date picker).
code snippet https://mdbootstrap.com/snippets/standard/s2131335/5865135
<div class="col-12 col-md-6 mb-4">
<div class="form-outline">
<i class="fas fa-exclamation-circle trailing pe-auto" style='cursor: pointer' onclick='alert("test");'></i>
<input type="date" id="course-startDate" class="form-control mb-0 form-icon-trailing" required />
<label class="form-label" for="course-startDate">Date</label>
</div>
Expected behavior: Clicking the trailing icon should trigger an alert pop up.
Actual behavior: Nothing happens when clicking the icon
The training icon was not designed with that use in mind so if you want to be able to click it you need to give it z-index higher than any forn-outline element.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.4.0
- Device: Macbook
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: Yes