Minimal jQuery Timer Picker Plugin - Wickedpicker

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.

<link rel="stylesheet" href="stylesheets/wickedpicker.css">
<script src="src/wickedpicker.js"></script>
<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.

$('.selector').wickedpicker();

3. Default plugin settings.

$('.selector').wickedpicker({

  // current time
  now: new Date(),

  // 12- or 24-hour format
  twentyFour: false,

  // CSS classes
  upArrow: 'wickedpicker__controls__control-up',
  downArrow: 'wickedpicker__controls__control-down',
  close: 'wickedpicker__close',
  hoverState: 'hover-state',

  // title
  title: 'Timepicker'
  
});

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.