This time I will share jQuery Plugin and tutorial about Minimal jQuery Timer Picker Plugin – Wickedpicker, hope it will help you in programming stack.
Wickedpicker is a simple, lightweight jQuery plugin that attaches a 24-hour or 12-hour time picker to your text field when clicked on.
Basic usage:
1. Add jQuery library together with the wickedpicker.css and wickedpicker.js to the webpage.
1 |
<link rel="stylesheet" href="stylesheets/wickedpicker.css"> |
2 |
<script src="src/wickedpicker.js"></script> |
3 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2. Just call the plugin on the desired text field and we’re done.
1 |
$('.selector').wickedpicker(); |
3. Default plugin settings.
01 |
$('.selector').wickedpicker({ |
10 |
upArrow: 'wickedpicker__controls__control-up', |
11 |
downArrow: 'wickedpicker__controls__control-down', |
12 |
close: 'wickedpicker__close', |
13 |
hoverState: 'hover-state', |
Change logs:
2016-08-16
- Fixing bug with config option now that was setting the wrong meridiem
2016-08-13
- Removing accidental console.log
2016-07-25
- Adding clearable picker input
2016-03-31
- Fixed Wickedpicker position and AM PM toggle on input click/focus
2016-03-06
- Added feature to close Wickedpicker when anything outside the timpepicker is clicked
2016-03-01
- Adding keyboard functionality and more options
This awesome jQuery plugin is developed by ericjgagnon. For more Advanced Usages, please check the demo page or visit the official website.
