With the free jQuery plugin Timedropper, you can add custom time pickers for setting appointments, scheduling phone calls, or pretty much anything you need.
It’s incredibly simple and you only need the jQuery library to get started. Once you’ve installed that library, you can add the Timedropper JS/CSS files and let it run. That’s it!
Each input field must be targeted by a jQuery selector which then adds the Timedropper input field. This does have options you can add with extra (optional) features:
Autoswitch – automatically changes hour/minute when mousing up
Meridians – set a 12-hour clock instead of a 24-hour
Format – sets how the hours & minutes appear (default style is 1:22 pm)
Mousewheel – enables time change based on wheel scroll
Init_animation – turns on the fading animation effects
setCurrentTime – automatically adds the current time to the field value
If you’re even more daring you can change the style using a few pre-packed themes, or even build your own from scratch.
In a sea of jQuery plugins, Timedropper is the bee’s knees. It really offers a unique interface for any app to select a time regardless of device.
Naturally, it is mobile-responsive, so it works on smartphones & tablets, too. However, I do not like the lack of num pad support. That seems like the obvious way to enter a time, so without that feature, it can feel limiting.
Still, for a unique interface and a simple setup, I do recommend Timedropper for anyone willing to give it a shot.
You can find all the source code free on GitHub and you’ll find an incredibly simple demo in this pen, embedded below.
If you have any other thoughts or suggestions feel free to share with the developer on Twitter @felice_gattuso.