timedropper: A Time Picker for jQuery

timedropper: A Time Picker for jQuery

timedropper is a beautiful and responsive time picker plugin for jQuery. Also check out datedropper by the same developer for an equally awesome date picker.


Download the package and then include timedropper.min.css and timedropper.min.js in the header of your website:

<script src="path/to/timedropper.min.js"></script>
<link rel='stylesheet' href='path/to/timedropper.min.css'
    type='text/css' media='all'/>

On your pages, simply add a text input that will act as the time picker:

<input type="text" id="pick-a-time" />

Finally, you’ll want to instantiate it. Include something like the following before the </body> tag:

$( document ).ready(function() {
  $( "#pick-a-time" ).timeDropper()


With timedropper you get 6 feature options:

autoswitch, meridians, format, mousewheel, init_animation & setCurrentTime.

And 4 style options:

primaryColor, textColor, background-color & borderColor

Here’s an example using some of the options:

$( document ).ready(function() {
  $( "#pick-a-time" ).timeDropper({
    borderColor: "#FF0000"
  Tweet It

🕵 Search Results

🔎 Searching...