A clock-style timepicker for Bootstrap

Prem Tiwari - - Freebies, JavaScript, Twitter, Web Technologies


The 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 the .btn styles of Bootstrap, I picked these styles to build a jQuery plugin. Feel free to use jquery-* files instead of bootstrap-*, for the non-bootstrap project.

time_picker

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 the touchscreen device.

Files need to be included in your code

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

demo download.


Prem Tiwari

Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer and a blogger by hobby.

Tags: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.