Topic: Timepicker - icon not displaying in input/pop up selection not workign
Display input with time picker clock icon, when icon clicked, time picker displays allowing users to easily set the time of day
input only accepts manual entry via keyboard input, I worked from the example shown on 'https://mdbootstrap.com/docs/standard/forms/timepicker/' of the mdbootstrap site.
Resources (screenshots, code snippets etc.)
<script>
//Default time string PM
const pickerStartedPM = document.querySelector('.timepicker-default-time-string-pm ');
const tmStartedPM = new mdb.Timepicker(pickerStartedPM, {
defaultTime: '02:12 PM'
});
" />
Set time-of-day
enter link description here
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.8.0
- Device: desktop
- Browser: Chrome/Brave/Safari
- OS: os x
- Provided sample code: No
- Provided link: Yes
Dawid Wajszczuk staff commented 2 years ago
Hi. Can you provide a snippet with this issue? Here is the link https://mdbootstrap.com/snippets/ . Did you add link to Font Awesome in your project? What HTML code did you use to initialize Timepicker? Here is the snippet with some examples that work fine https://mdbootstrap.com/snippets/standard/d-wajszczuk/3161177#html-tab-view
monkee priority commented 2 years ago
Yes, I've included Font Awesome in my project, and it is working as the calendar icon appears in date-picker - see the picture I included prior.
I've included the snippet and it shows the date picker icon that doesn't display in my project - it's very discouraging as it works here but not in mine.
Dawid Wajszczuk staff commented 2 years ago
I can't see link to your snippet. All I can see is 2 links to our Timepicker documentation and your JS code which looks fine. But without your HTML code which has been used for Timepicker I am not able to help you.
All I can suggest is to check if in your HTML code, used for Timepicker, you have this attribute
data-mdb-with-icon="false". If so, please remove it. Or you can try to add this attributedata-mdb-with-icon="true"to your Timepicker as shown in this snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3168693 .monkee priority commented 2 years ago
I added a snippet, but I can't figure out how you include the link --how do you do that?
Dawid Wajszczuk staff commented 2 years ago
Just copy the link to your snippet and paste it here in the comment. After your comment will have been published, it will automatically become a link.