TimeDropper - A Pretty Cool jQuery Time Picker

Written by Kevin Liew on 31 May 2016
35,795 Views • Javascript

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.


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>


Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.