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.
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:
Head
<script src="js/timedropper.js"></script> <link rel="stylesheet" type="text/css" href="js/timedropper.css">
Body
<input type="text" id="alarm" />
End
<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.