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