Topic: dendencies to use timepicker
what are all the module dependencies needed to use the timepicker input component?
I'm getting an error that the TimePicker constructor ins't available even after importing timepicker, date-time-picker, datepicker etc
It works for me. In the head section I am importing base css nad Timepicker css:
<link rel="stylesheet" href="css/mdb.min.css" />
<link rel="stylesheet" href="css/modules/timepicker.min.css" />
Then I am appending the Timepicker itself
<div class="form-outline timepicker">
<input type="text" class="form-control" id="form11" />
<label class="form-label" for="form11">Select a time</label>
</div>
Then at the bottom of my body element I am importing js files
<script type="text/javascript" src="js/modules/timepicker.min.js"></script>
<script type="text/javascript" src="js/free/mdb.min.js"></script>
Darryl commented 3 years ago
Is that mdb css the base, eg free css? Should be in a free folder.
Darryl commented 3 years ago
Sorry, I see in your screenshot that you actually used the free css. Let me try this again. I wonder if order of imports is important?
Michał Duszak staff commented 3 years ago
Most of times it is.
Darryl commented 3 years ago
Also -- for your example above. Can you try the inline picker. In particular, let me know if you have the same constructor class missing if you add:
const pickerInline = document.querySelector('.timepicker-inline-12'); const timepickerMaxMin = new mdb.Timepicker(pickerInline, { format12:true, inline: true });
Michał Duszak staff commented 3 years ago
It does - because we are importing mdb free. As Timepicker is a pro component, free mdb min js doesn't contain its constructor.
Darryl commented 3 years ago
yes, but shouldn't importing the timepicker module (along with the mdb free package) be sufficient?
Michał Duszak staff commented 3 years ago
I will put this into discussion with the front end team so that we can provide the most sufficient solution
Michał Duszak staff commented 3 years ago
I will put this into discussion with the front end team so that we can provide the most sufficient solution
Didn't resolve the issue -- I also just noticed that none of the timepickers on the mdb site work for me. Perhaps there is an issue with my browser (using latest Chrome).
Basically you click to change the time, and nothing displays.
https://mdbootstrap.com/docs/standard/forms/timepicker/
Darryl commented 3 years ago
Worked it out -- It's because I'm browsing via remote desktop which disabled animations.
As some feedback -- there seems to be a number of components/plugins which don't handle users who have animations disabled via win settings. I do think mdb should focus on better handling for that.
Michał Duszak staff commented 3 years ago
Thank you for your feedback. Is timepicker working for you now?
Darryl commented 3 years ago
It is, as long as I import the full mdb pro css/js package.
I can't use the inline timepicker (and timepicker constructor) if I use the mds free package + the timepicker css/js modules.
Would be good if that could be corrected, as I'd prefer to use free + modules on a per-page basis.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: No
Michał Duszak staff commented 3 years ago
Hello, when exactly this issue occurs? Could you send exact errors from your console? Could you tell me steps are you taking before problem occurs?
Michał Duszak staff commented 3 years ago
Those instructions might help https://mdbootstrap.com/docs/standard/getting-started/webpack-starter/#section-custom-version-of-mdb-ui-kit
Darryl commented 3 years ago
Rather than do a custom build, I'm more interested in just importing the free mdb kit, and then on the page with the time picker, I also import the timeticker css and js modules. This works fine for other components like selectors. But for the time picker, the mdb.Timepicker constructor isn't available even after referencing the module files.