Minimal jQuery Timer Picker Plugin - Wickedpicker

File Size: 28 KB
Views Total: 32180
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>

2. Just call the plugin on the desired text field and we're done.


3. Default plugin settings.


  // 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:


  • Fixing bug with config option now that was setting the wrong meridiem


  • Removing accidental console.log


  • Adding clearable picker input


  • Fixed Wickedpicker position and AM PM toggle on input click/focus


  • Added feature to close Wickedpicker when anything outside the timpepicker is clicked


  • 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.