A clock-style timepicker for Bootstrap

By: Prem Tiwari | Last Updated: | In: Freebies, Javascript & Ajax, 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.

Share this post!


About: Prem Tiwari

Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies.


, , , , ,