Topic: How to set timepicker options without global mdb variable

Kevin priority asked 7 months ago

Dear MDB-Team,

I want to add a timepicker with options without the global MDB variable. I've tried some solutions but it doesn't work via JS and with the HTML data-mdb-attributes too. Here is my current code:

const picker = document.querySelector('.timepicker');
if(picker) {
  const timepicker = new mdb.Timepicker(picker, {
  format24: true,
  disablePast: true,

Do someone know how to do that?

Best regards Kevin

Kevin priority answered 7 months ago

These are my imports:

<link rel="stylesheet" href="/resources/css/free/mdb.min.css" />
<link rel="stylesheet" href="/resources/css/modules/navbar.min.css" />
<link rel="stylesheet" href="/resources/css/modules/select.min.css" />
<link rel="stylesheet" href="/resources/css/modules/timepicker.min.css" />


<script type="text/javascript" src="/resources/js/modules/alert.min.js"></script>
<script type="text/javascript" src="/resources/js/modules/lazy-load.min.js"></script>
<script type="text/javascript" src="/resources/js/modules/modal.min.js"></script>
<script type="text/javascript" src="/resources/js/modules/navbar.min.js"></script>
<script type="text/javascript" src="/resources/js/modules/select.min.js"></script>
<script type="text/javascript" src="/resources/js/modules/timepicker.min.js"></script>

Kevin priority answered 7 months ago

I tried this way but it doesn't work.

<div class="form-outline timepicker">
    <input type="text" class="form-control" id="Timepicker1" data-mdb-toggle="timepicker" 
        data-mdb-toggle-button="true" data-mdb-format24="true" data-mdb-disable-past="true" name="SELECTED_TIME"/>
       <label class="form-label" for="Timepicker1">zrdz</label>

Kamila Pieńkowska staff commented 7 months ago

You're using data attributes on the wrong tag. Besides data-mdb-toggle="timepicker" you should move all data attributes to div with form-outline class.

Kevin priority commented 7 months ago

Oh how could I not see that. Thank you

Kamila Pieńkowska staff answered 7 months ago

Here is a snippet showcasing how to set timepicker options with data attributes:

Kevin priority commented 7 months ago

And by the way do you know which resource file I've to add to use accordions with collapsing?

Kamila Pieńkowska staff commented 7 months ago


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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.2
  • Device: Computer
  • Browser: Firefox
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No