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.

Installation

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()
});

Options

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({
    init_animation:'dropdown',
    mousewheel:true,
    setCurrentTime:false,
    borderColor: "#FF0000"
  });
});
✖ Clear

🕵 Search Results

🔎 Searching...