timeDropper – A beautiful & better UI timepicker

If you are a designer or a developer it is very likely that you have a situation in which you had to incorporate a timepicker in a client’s website. Most of the time, the timepickers are very plain and default in style. Nothing special about them. Even if you put a lot of effort in styling them, there is not much you can achieve.

But sometimes, in a very special website, we want to add this little something that will make it stick out from the crowd. timeDropper plugin can help in adding this unique design touch.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

timeDropper – A beautiful & better UI timepicker

It wouldn’t be exaggerating if I tell you that this jQuery plugin is very unique and stylish. It focuses on having a wonderful interactive input that opens when the time should be selected.
What’s more, it is very easy to be added.

Add timeDropper in 3 simple steps:


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


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


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

There are also a lot of options which can help in adjusting and finding the best solution for any website:
– Automatically change hour-minute or minute-hour on mouseup/touchend;
– Set time in 12-hour clock in which the 24 hours of the day are divided into two periods;
– A time format string that timeDropper expects existing values to be in and will write times out it;
– Automatically set current time by default;
– Adjusting the primary, background, border and text colour;

Related post:  9 Useful and Effective Wireframing Tools

Isn’t it great? Learn more or download the plugin to get started.


Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.