jQuery clockpicker Examples

jQuery clockpicker 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:

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