Topic: How to set timepicker options without global mdb variable
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
Here is a snippet showcasing how to set timepicker options with data attributes: https://mdbootstrap.com/snippets/standard/kpienkowska/5783750
Kevin pro premium priority commented 11 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 11 months ago
js/free/mdb.min.js
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 11 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 pro premium priority commented 11 months ago
Oh how could I not see that. Thank you
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>
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.2
- Device: Computer
- Browser: Firefox
- OS: Windows 11
- Provided sample code: No
- Provided link: No