A clock-style timepicker for Bootstrap

By Prem Tiwari in Freebies, JavaScript, Twitter, Web Technologies. Updated on


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.

Sharing is caring!


Prem Tiwari

An engineer by profession and a passionate blogger by heart. Founder of FreeWebMentor.com (A Programming blog for beginners), Tech Speaker at various forums. A part from this he is an open source enthusiast, WordPress Lover, Blogger, SEO, and Growth Strategic.

You might also like:

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.