dendencies to use timepicker


Topic: dendencies to use timepicker

Darryl asked 3 years ago

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


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.


Michał Duszak staff answered 3 years ago

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>

code


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


Darryl answered 3 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags