ClockPicker

A clock-style timepicker for Bootstrap (or jQuery).

Download ZIP CSS < 6KB, JS < 9KB, after minified.

This is the non-bootstrap documentation page.

Browser support

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

Device support

Both desktop and mobile device are supported. It also works great in touch screen device.

Dependencies

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.

See ClockPicker for Bootstrap.

Examples

Try it on jsfiddle

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:

<input type="text" class="form-control" id="single-input" value="" placeholder="现在">
<script type="text/javascript">
$('#single-input').clockpicker({
	placement: 'bottom',
	align: 'right',
	autoclose: true,
	'default': '20:48'
});
</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

What's included

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

License

MIT