Examples

Default: 

<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>
                <script type="text/javascript"> $('.clockpicker').clockpicker(); </script>

Place at left, align the arrow to top, auto close: 

<div class="input-group clockpicker" data-placement="left"
                data-align="top" data-autoclose="true"> <input type="text" class="form-control"
                value="13:14"> <span class="input-group-addon"> <span class="glyphicon
                glyphicon-time"></span> </span> </div> <script type="text/javascript">
                $('.clockpicker').clockpicker(); </script>

Set options in javascript, instead of data-* : 

<div class="input-group clockpicker">
                <input type="text" class="form-control" value="18:00"> <span class="input-group-addon">
                <span class="glyphicon glyphicon-time"></span> </span> </div>
                <script type="text/javascript"> $('.clockpicker').clockpicker({ placement:
                'top', align: 'left', donetext: 'Done' }); </script>

Set default value, input without addon, and manual operations: 

<input class="form-control" id="single-input"
                value="" placeholder="现在"> <button type="button" id="check-minutes">Check
                the minutes</button> <script type="text/javascript"> var input = $('#single-input').clockpicker({
                placement: 'bottom', align: 'left', autoclose: true, 'default': '20:48' }); // Manually
                toggle to the minutes view $('#check-minutes').click(function(e){ // Have to stop
                propagation here e.stopPropagation(); input.clockpicker('show') .clockpicker('toggleView',
                'minutes'); }); </script>

Options

Name Default Description
default '' default time, '13:14' e.g.
placement 'bottom' popover placement
align 'left' popover arrow align
donetext '完成' done button text
autoclose false auto close when minute is selected
vibrate true vibrate the device when dragging clock hand

Operations

operation Arguments Description
show show the clockpicker
hide hide the clockpicker
remove remove the clockpicker (and event listeners)
toggleView 'hours' or 'minutes' toggle to hours or minutes view