Minimal Clock Style Time Input Plugin With jQuery - clockInput
File Size: | 9.07 KB |
---|---|
Views Total: | 7957 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

clockInput is a lightweight jQuery plugin which converts the normal input field into a fancy clock-style time picker for easier time selection.
See also:
- Material Inspired Clock Time Picker Plugin - jQuery MDTimePicker
- Android-style Analog Clock Time Picker Plugin With jQuery
- Easy Clock Time Picker Plugin For Bootstrap - Clockface
- KitKat Clock-Style Timer Picker with jQuery and CSS3 - KitKatClock
- jQuery Plugin To Select The Time Form A Clock-Style Interface
- Classic Clock Style Time Picker Plugin For jQuery
- jQuery Clock Style Time Picker Plugin For Bootstrap 3 - clockpicker
- Beautiful Animated jQuery Date Picker Plugin - datedropper
How to use it:
1. Include jQuery JavaScript and the jQuery clockInput plugin's JavaScript and CSS files on the web page.
<link rel="stylesheet" href="jquery.clockinput.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="jquery.clockinput.js"></script>
2. Create a normal time input for the clock time picker.
<input type="time" value="00:00" min="0:00" max="18:02">
3. Call the function on document ready. That's it.
$(document).ready(function() { $("input[type=time]").clockInput(false); })
4. To disable minutes, just set the parameter to true
.
$(document).ready(function() { $("input[type=time]").clockInput(true); })
Change log:
2017-11-11
- v0.0.2
This awesome jQuery plugin is developed by shengslogar. For more Advanced Usages, please check the demo page or visit the official website.