<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="Now"><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': 'now'});// 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, 'now' or '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 |
| fromnow | 0 | set default time to * milliseconds from now (using with default = 'now') |
| 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 |
clockpicker/├── dist/│ ├── bootstrap-clockpicker.css # full code for bootstrap│ ├── bootstrap-clockpicker.js│ ├── bootstrap-clockpicker.min.css # compiled and minified files for bootstrap│ ├── bootstrap-clockpicker.min.js│ ├── jquery-clockpicker.css # full code for jquery│ ├── jquery-clockpicker.js│ ├── jquery-clockpicker.min.css # compiled and minified files for jquery│ └── jquery-clockpicker.min.js└── src/ # source code ├── clockpicker.css ├── clockpicker.js └── standalone.css # some styles picked from bootstrapMIT