Responsive bootstrap 3 timepicker?

user2989367 picture user2989367 · Jan 10, 2014 · Viewed 148.9k times · Source

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!

Answer

Subin Sebastian picture Subin Sebastian · Jul 31, 2014

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