Submit your widget

clock-style timepicker with jQuery

Created 5 years ago   Views 18115   downloads 3919    Author weareoutman
clock-style timepicker with jQuery
View DemoDownload 416.2 KB
Share |

This is a clock-style timepicker for Bootstrap (or jQuery).

All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8.

ClockPicker was designed for Bootstrap in the beginning. So Bootstrap (and jQuery) is the only dependency(s).


Since it only used .popover and some of .btn styles of Bootstrap, I picked these styles to build a jQuery plugin. Feel free to use jquery-* files instead of bootstrap-* , for non-bootstrap project.


<!-- Bootstrap stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

<!-- ClockPicker Stylesheet -->
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">

<!-- Input group, just add class 'clockpicker', and optional data-* -->
<div class="input-group clockpicker" data-placement="right" data-align="top" data-autoclose="true">
    <input type="text" class="form-control" value="09:32">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>

<!-- Or just a input -->
<input id="demo-input" />

<!-- jQuery and Bootstrap scripts -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>

<!-- ClockPicker script -->
<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>

<script type="text/javascript">
        // TODO: time changed
    autoclose: true

if (something) {
    // Manual operations (after clockpicker is initialized).
    $('#demo-input').clockpicker('show') // Or hide, remove ...
            .clockpicker('toggleView', 'minutes');

Read more: