Getting started

timedropper is a jQuery timepicker plugin. Get started by installing timedropper on your site and initializing it on one or more elements.

How to install timedropper

Get timedropper and you will then be able to download timedropper source files for a direct integration into your site.

Add timedropper.js to the <head> of the pages on which timedropper is being used, as described in the following example:

<head>
  <!-- timedropper -->
  <script src="timedropper-jquery.js"></script>
</head>

Don't forget to include a version of jQuery before integrating timedropper:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

Once the installation is complete, initialize timedropper on the elements on which it has to be executed (e.g. on an input).

Define the timepicker element on which timedropper has to be initialized, and run the .timeDropper() function.

For instance, you can initialize timedropper on an input with myPicker id:

<input id="myPicker" type="text">

<!-- timedropper init -->
<script>$('#myPicker').timeDropper();</script>

Make sure to initialize timedropper after the element or on document ready.