Fancy Clock-style Time Picker Plugin For jQuery - Timedropper

File Size: 12.9 KB
Views Total: 10090
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fancy Clock-style Time Picker Plugin For jQuery - Timedropper

Timedropper is a fancy jQuery & jQuery UI time picker plugin which allows the user to select a time from a clock interface with a 360° drop-style slider handle.


  • Auto changes hour-minute or minute-hour on mouseup/touchend.
  • Custom time format.
  • Mouse wheel supported.
  • Custom CSS styles.
  • FadeIn and dropdown animations.
  • Dead simple to use and easy to customize.
  • jQuery UI based slider control.

See also:

How to use it:

1. The jQuery Timedropper plugin requires jQuery and jQuery UI libraries included properly in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Copy and include the JavaScript file timedropper.js, and the style sheet timedropper.js in your project.

<link href="timedropper.css" rel="stylesheet">
<script src="timedropper.js"></script>

3. Create a text field that will pops out a timer picker interface when clicked on.

<input type="text" id="example">

4. Initialize the time picker plugin with default options.

$( "#example" ).timeDropper();

5. All default configuration options.

$( "#example" ).timeDropper({

  // custom time format
  format: 'h:mm a',

  // auto changes hour-minute or minute-hour on mouseup/touchend.
  autoswitch: false,

  // sets time in 12-hour clock in which the 24 hours of the day are divided into two periods. 
  meridians: false,

  // enable mouse wheel
  mousewheel: false,

  // auto set current time
  setCurrentTime: true,

  // fadeIn(default), dropDown
  init_animation: "fadein",

  // custom CSS styles
  primaryColor: "#1977CC",
  borderColor: "#1977CC",
  backgroundColor: "#FFF",
  textColor: '#555'

About Author:

Author: Felice Gattuso


This awesome jQuery plugin is developed by felicegattuso. For more Advanced Usages, please check the demo page or visit the official website.