Topic: Timepicker 4.20 does not show on clicking the icon

jaimefuhr free asked 2 years ago

I am unable to get the timepicker in MDB4 version 4.20 to show with my code, but it does work with the sample code.

The code I am using is this:

<div class="input-group timepicker" twelvehour="true">
<div class="input-group-prepend">
  <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
<input type="text" ID="startTime" CssClass="form-control" placeholder="hh:mm am/pm">

Also, is there a way to change the behavior so that clicking the input box will bring up the time picker? The same way it worked prior to this version.

Marcin Luczak staff answered 2 years ago


Code specified in the documentation should not be changed in the way you did it as the Timepicker constructor checks for elements with specific classes and attributes to make component work.

To make your Timepicker open on the input click, please use this syntax:

<div class="md-form md-outline input-with-post-icon timepicker" id="myTimePicker" default="now">
  <input type="text" class="form-control time-picker-opener" placeholder="Select time" data-open="myTimePicker">
  <label >Access from outside</label>
  <i class="fas fa-envelope  input-prefix"></i>

Crucial here is adding time-picker-opener class and data-open="your_timepicker" to the element you want to Timepicker be opened with.

Keep coding, Marcin

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.19.2
  • Device: desktop
  • Browser: Edge
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No