ClockPicker

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

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() {
    							console.log("before show");
    						},
    						afterShow: function() {
    							console.log("after show");
    						},
    						beforeHide: function() {
    							console.log("before hide");
    						},
    						afterHide: function() {
    							console.log("after hide");
    						},
    						beforeHourSelect: function() {
    							console.log("before hour selected");
    						},
    						afterHourSelect: function() {
    							console.log("after hour selected");
    						},
    						beforeDone: function() {
    							console.log("before done");
    						},
    						afterDone: function() {
    							console.log("after done");
    						}
    				});

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