Responsive bootstrap 3 timepicker?
Solution 1
Above of all, I found this library right here. Works out of the box perfectly on a Bootstrap-3 environment.
Bootstrap-3 Clock-Picker
CSS
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">
HTML
<div class="input-group clockpicker">
<input type="text" class="form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
JAVASCRIPT
<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>
As simple as that! Find more examples on the link above.
Update 18/04/2018
If you are using Bootstrap-4, the most popular time/date picker library available right now is Tempus Dominus. It is not fancy looking, but much responsive and modern.
Bootstrap-4 Tempus Dominus
Solution 2
This is a slightly modified version of http://jdewit.github.io/bootstrap-timepicker/ which supports bootstrap 3. You can check it out here. https://github.com/m3wolf/bootstrap3-timepicker Let me know if it does not work and I will try to find an alternative.
Update. Here is another one based off of the same version, but modified for bootstrap 3. https://github.com/rendom/bootstrap-3-timepicker
Update 2. Here is yet another one. http://bootstrapformhelpers.com/timepicker/
Solution 3
Here's another option I found recently while exploring the same issue: Eonasdan on Github
Worked well for me in a .NET MVC/Bootstrap 3 environment.
Here's an example page for it as well.
Solution 4
As an update to the OP's question, I can confirm that the timepicker found at http://jdewit.github.io/bootstrap-timepicker/ does in fact work with Bootstrap 3 now with no problems at all.
user2989367
Updated on July 09, 2022Comments
-
user2989367 almost 2 years
Does anyone know of a good responsive bootstrap 3 timepicker?
Ive spent a week going through timepicker after timepicker and there was always a problem for example: http://jdewit.github.io/bootstrap-timepicker/ would of been perfect but its for bootstrap 2, http://www.malot.fr/bootstrap-datetimepicker/ isnt responsive, and I went through at least 3 more that either wouldnt work for bootstrap 3, wasnt responsive, or didnt support 24 hour system (which I need)
So if anyone knows of any good one that looks neat preferably like the jdewit one, that is responsive and that supports 24 hour system please share it would be greatly appreciated and would end my week long search so I can finally move on to something new :p Thank you!
-
Todd Horst almost 10 yearsIndeed they say they are bootstrap 3, but has anyone gotten them to work?
-
Hans over 9 yearsYour answer is not correct. The code you showed uses bootstrap 2.3.2 not 3
-
lewis over 9 yearsWorks with Twitter Bootstrap 3 on me
-
MrMadsen about 9 yearsWorked with bootstrap 3.3.2 for me.
-
Keith almost 9 yearsThe one by rendom works well. Be sure to follow the demo: github.com/rendom/bootstrap-3-timepicker/blob/master/demo/…
-
Donny V. almost 9 yearsForget it I found it. twelvehour=true
-
Gonzalo Méndez about 8 yearsWhat would be the correct way to set placement so it remains responsive?
-
MsTapp about 6 yearsThis clock picker is no longer maintained according to their info on GitHub.
-
C-- about 6 years@MrsTapp Updated the answer for Bootstrap-4 with the most popular library available.
-
Munim Munna over 5 yearsI have added a clock-like responsive time-picker to eonasdan datetimepicker, it works on both bootstrap 3 and 4 and kinda fancy looking :D
-
Bricky over 3 yearsIt would be helpful if you used inline links, that way you could just write [this one](www.somesite.com) instead of including URLs - it makes comments cleaner to read and easier to skim!