Minimal Clock Style Time Input Plugin With jQuery - clockInput

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.