How to set timepicker options without global mdb variable

Topic: How to set timepicker options without global mdb variable

Kevin priority asked 5 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

Add comment

Kevin priority answered 5 months ago

0 0 Best answer

Please insert min. 20 characters.

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" />

and:

<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>

Add comment

Kevin priority answered 5 months ago

0 0 Best answer

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>
</div>

Kamila Pieńkowska staff commented 5 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.