Bootstrap Timepicker

[TonyA]

Hi, included in the vendor files was the Bootstrap-Timepicker but I can’t seem to get it to work correctly. Is there some basic mark up html in the forum?

This is how I am marking it up in asp.net, but it just doesn’t work

<div class=”input-group”>
<asp:TextBox ID=”txtShowTime” data-plugin-timepicker runat=”server” CssClass=”form-control” TabIndex=”3″></asp:TextBox>
<div class=”input-group-text “>
<span class=””><i class=”fa-regular fa-clock”></i></span>
</div>

---

Template Version: 11

[Support]

Hello, you can see an example of that in this page:
https://www.okler.net/previews/porto/12.0.0/demo-auto-services-appointment.html

Documentation: https://jdewit.github.io/bootstrap-timepicker

HTML:

<input type="text" id="timePickerTest" class="form-control">

JS:
(js/custom.js)

(function($) {
	$('#timePickerTest').timepicker({
		disableMousewheel: true,
		icons: {
			up: 'fas fa-chevron-up',
			down: 'fas fa-chevron-down'
		},
		showSeconds: true,
		showMeridian: false
	});
}).apply(this, [jQuery]);

More options can be found in this link: http://jdewit.github.io/bootstrap-timepicker/

---

• This reply was modified 2 weeks ago by Support.
• This reply was modified 2 weeks ago by Support.

[TonyA]

Thanks, that works. Does it only work on the text field? Is there a way to get the font-awesome clock icon to popup the time widget as well as clicking the text field? This function worked in both areas in the previous Okler version with Bootstrap 3.7. I tried input-group-addon but it doesn’t work.

---

[Support]

HTML:

<div class="input-group mb-3">
  <input id="timepicker1" type="text" class="form-control">
  <span class="input-group-text" id="timepicker1Clock"><i class="fa-regular fa-clock"></i></span>
</div>

JS:

(function($) {
	$('#timepicker1').timepicker({
		disableMousewheel: true,
		icons: {
			up: 'fas fa-chevron-up',
			down: 'fas fa-chevron-down'
		},
		showSeconds: true,
		showMeridian: false
	});
	
	$('#timepicker1Clock').on('click', function() {
		$('#timepicker1').focus();
	});	
	
}).apply(this, [jQuery]);

---

[TonyA]

Excellent, than you!

---

[Author]

Posts