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.
Both desktop and mobile device are supported. It also works great in touch screen device.
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.
<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 bootstrap
MIT