Responsive bootstrap 3 timepicker?

Question

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!

score 77 · Answer 1 · edited Jun 20 '20 at 09:12

77

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 31 '14 at 10:55

C--

16,393
6
53
60

Your answer is not correct. The code you showed uses bootstrap 2.3.2 not 3 – Hans Sep 04 '14 at 23:29
1

Works with Twitter Bootstrap 3 on me – lewis Sep 12 '14 at 06:17
1

Worked with bootstrap 3.3.2 for me. – MrMadsen Apr 17 '15 at 04:00
4

Forget it I found it. twelvehour=true – Donny V. Jun 18 '15 at 20:40
What would be the correct way to set placement so it remains responsive? – Gonzalo Méndez Apr 06 '16 at 20:03
1

This clock picker is no longer maintained according to their info on GitHub. – MsTapp Apr 17 '18 at 16:54
1

@MrsTapp Updated the answer for Bootstrap-4 with the most popular library available. – C-- Apr 18 '18 at 09:49
1

I have added a [clock-like responsive time-picker](https://github.com/monim67/bootstrap-datetimepicker) to eonasdan datetimepicker, it works on both bootstrap 3 and 4 and kinda fancy looking :D – Munim Munna Aug 22 '18 at 02:29

nahtnam · Answer 2 · 2014-01-10T04:20:14.380

28

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/

edited Jan 10 '14 at 04:20

answered Jan 10 '14 at 01:38

nahtnam

2,659
1
18
31

Indeed they say they are bootstrap 3, but has anyone gotten them to work? – Todd Horst Jun 12 '14 at 11:48
The one by rendom works well. Be sure to follow the demo: https://github.com/rendom/bootstrap-3-timepicker/blob/master/demo/index.html – Keith May 08 '15 at 19:01

Sam Ellis · Answer 3 · 2014-06-24T17:25:06.200

4

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.

edited Jun 24 '14 at 17:25

answered Jun 24 '14 at 06:04

Sam Ellis

781
2
6
15

score 1 · Answer 4 · answered Jun 22 '16 at 00:15

1

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.

answered Jun 22 '16 at 00:15

Greg Quinn

1,927
1
23
26

score 0 · Answer 5 · answered Oct 18 '19 at 06:39

Kendo UI provides the best and ultimate collection of JavaScript UI components with libraries for jQuery, Angular, React, and Vue. You can quickly build eye-catching, high-performance, responsive web applications regardless of your JavaScript framework choice. Here is a timepicker UI component from them:

Also below is an alternate and a simple solution

<!--Css-->
<link href="css/timepicker.css" type="text/css" rel="stylesheet" />

<!--Html-->
<div class="row">
    <div class="col">
        <label class="label-in">Time</label>
        <input class="timepicker" id="event-time" type="text" value="" required="">
    </div>
</div>

<!--Script-->
<script src="Scripts/ClockPicker.js"></script>
<script>
   $('.timepicker').timepicker({
     });
</script>

Here is yet another popular framework Bootstrap Time Picker from mdbootstrap

score 0 · Answer 6 · answered Nov 30 '20 at 21:11

With Bootstrap 3.4.1 http://jdewit.github.io/bootstrap-timepicker/ does not work and is no longer maintained (https://github.com/jdewit/bootstrap-timepicker)
This one "https://github.com/rendom/bootstrap-3-timepicker" is announced as: Timepicker for Twitter Bootstrap 3 fork of https://github.com/jdewit/bootstrap-timepicker
Bootstrap Time Picker from mdbootstrap is a "MDB PRO COMPONENT" and is priced € 99 for "Lifetime usage. 12 months of premium support and unlimited updates".

Was someone able to have a timepicker working with Bootstrap 3.4?

It 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! — Bricky, Nov 30 '20 at 21:52

Responsive bootstrap 3 timepicker?

6 Answers6

Bootstrap-3 Clock-Picker

Update 18/04/2018

Bootstrap-4 Tempus Dominus

Linked