Custom Time Input Fields with jQuery Timedropper

By . in Toolkit. Updated on .

Some web forms require date-based inputs and date picker plugins can help with that. But, what about time inputs?

With the free jQuery plugin Timedropper, you can add custom time pickers for setting appointments, scheduling phone calls, or pretty much anything you need.

Recommended Reading: A Look Into HTML5 Forms Input Types: Date, Color and Range

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!

Timedropper plugin options

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.

Recommended Reading: How to: Customizing and Theming jQuery UI Datepicker

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail