A clock-style timepicker for Bootstrap

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.


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

├── 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.

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Recommended Posts:

Article Tags: , , , , ,