Minimal Clock Style Time Input Plugin With jQuery - clockInput

Minimal Clock Style Time Input Plugin With jQuery - clockInput
File Size: 9.07 KB
Views Total:
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:

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.