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.

Features:

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

• KitKat Clock-Style Timer Picker with jQuery and CSS3 - KitKatClock
• jQuery Plugin To Select The Time Form A Clock-Style Interface
• Classic Clock Style Time Picker Plugin For jQuery
• jQuery Clock Style Time Picker Plugin For Bootstrap 3 - clockpicker
• Beautiful Animated jQuery Date Picker Plugin - datedropper

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

Website: http://felicegattuso.com/projects/timedropper/

---

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