Topic: How to make input (type=date) field trailing icon clickable?

s2131335 priority asked 6 months ago


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


Kamila Pieńkowska staff answered 6 months ago


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.


s2131335 priority commented 6 months ago

It works, thank you!



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 6.4.0
  • Device: Macbook
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes