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

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

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

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, and manual operations:

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

Callbacks:

			
				<input class="form-control" id="single-input" value="" placeholder="Now">
				<script type="text/javascript">
				var input = $('.clockpicker-with-callbacks').clockpicker({
					donetext: 'Done',
						init: function() { 
							console.log("colorpicker initiated");
						},
						beforeShow: function(value) {
							console.log("before show", value);
						},
						afterShow: function(value) {
							console.log("after show", value);
						},
						beforeHide: function(value) {
							console.log("before hide", value);
						},
						afterHide: function(value) {
							console.log("after hide", value);
						},
						beforeHourSelect: function(value) {
							console.log("before hour selected", value);
						},
						afterHourSelect: function(value) {
							console.log("after hour selected", value);
						},
						beforeDone: function(value) {
							console.log("before done", value);
						},
						afterDone: function(value) {
							console.log("after done", value);
						}
				});

				// 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, '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')
init callback function triggered after the colorpicker has been initiated
beforeShow callback function triggered before popup is shown
afterShow callback function triggered after popup is shown
beforeHide callback function triggered before popup is hidden
Note: will be triggered between a beforeDone and afterDone
afterHide callback function triggered after popup is hidden
Note: will be triggered between a beforeDone and afterDone
beforeHourSelect callback function triggered before user makes an hour selection
afterHourSelect callback function triggered after user makes an hour selection
beforeDone callback function triggered before time is written to input
afterDone callback function triggered after time is written to input

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

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