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.

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;

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


You may also like...

Leave a Reply

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