<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><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>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><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>| 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 |
| 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 |