TimeDropper - A Pretty Cool jQuery Time Picker

Previously I have posted DateDropper, a datepicker that is fun to use. This time, the same author has also created a pretty unique jQuery timepicker called TimeDropper.

Date and time pickers are quite a common input method. Instead of using drop down for day, month, year, hour and minute, date & time picker can simplify the UI and eliminates invalid date or time being entered. For timepicker, we usually see it implemented with sliders and drop down menu, but here TimeDropper is using a quite unique way to select hour and minute. Tap on hour or minute and spin the dial for increment and decrement of hour or minute.

Installation

Just like how you'd install other jQuery Plugin, it's a 3 steps implementation:

1. Include the Javascript and CSS to the HTML, make sure you have jQuery too.

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

2. Add a class or ID to your HTML INPUT element

<input type="text" id="alarm" />  

3. Run the plugin

<script>$( "#alarm" ).timeDropper();</script>

SPECIFICATIONS & DOWNLOAD

• TAGS:
• Form
• Javascript
• jQuery