Recently I found A awesome timepicker plugin on internet which gives you feel like clock-style timepicker. The plugin has made on both jquery and bootstrap, If your project don’t allow bootstrap you can simply use jquery library and quick integrate A clock-style timepicker in your form element.
It support All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8.Both desktop and mobile device are supported. It also works great in touch screen device.
First add required libraries on page, In this tutorial i am going to use jquery time picker library.
<link rel="stylesheet" type="text/css" href="jquery-clockpicker.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">script> <script src="jquery-clockpicker.min.js">script> |
Now add html input element which display clock picker when you focus on cursor.
Finally add clockpicker() function on page and pick time like clock style.
<script type="text/javascript"> $('.clockpicker').clockpicker({ placement: 'bottom', align: 'left', donetext: 'Done' }); script> |
You can also set clock display position like top, bottom, left, right etc.
Set click time picking action auto or on button dome conditions.
You can also manage clock picking properties by passing options with data attribute with less javascript see following example.
See live demo and download sample source code.
See official website for more demos and options.
