This time I will share jQuery Plugin and tutorial about Minimal Clean Time Picker Plugin – jQuery chungTimePicker, hope it will help you in programming stack.
chungTimePicker is a jQuery time picker plugin that provides an easy and intuitive way to select hours and minutes from an inline time selection interface.
How to use it:
1. Include the jQuery chungTimePicker plugin’s stylesheet in the header of the html document.
1 |
<link rel="stylesheet" href="chung-timepicker.css"> |
2. Include jQuery library and the jQuery chungTimePicker plugin’s script at the bottom of the document but before we close the body tag.
2 |
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" |
3 |
crossorigin="anonymous"> |
5 |
<script src="chung-timepicker.js"></script> |
3. Create a normal input field for the time picker.
1 |
<input type="text" id="demo" value="10:20"> |
4. Call the function on the input field and done.
1 |
$('#demo').chungTimePicker(); |
5. Change the default timepicker view.
1 |
$('#demo').chungTimePicker({ |
6. Specify how many entries per row.
1 |
$('#demo').chungTimePicker({ |
7. Default callback.
1 |
$('#demo').chungTimePicker({ |
2 |
callback: function(e) { |
8. Cancel callback.
1 |
$('#demo').chungTimePicker({ |
2 |
cancelCallback: function(e) { |
9. Clear callback.
1 |
$('#demo').chungTimePicker({ |
2 |
clearCallback: function(e) { |
10. Confirm callback.
1 |
$('#demo').chungTimePicker({ |
2 |
confirmCallback: function(e) { |
This awesome jQuery plugin is developed by zhongjinglin. For more Advanced Usages, please check the demo page or visit the official website.
