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