Examples

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>

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

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