Install JavaScript, if it is not already present on your system. Open your JavaScript client and enter the command “npm install jquery” if you don’t already have jQuery, followed by “npm install grunt”. Grunt is a command-line build tool which Timepicker requires.

Once these dependencies are fulfilled, run “npm install https://github.com/jonthornton/jquery-timepicker/zipball/master” to install Timepicker itself. Run “grunt” from the Timepicker directory to finish the installation process.

Now that Timepicker is installed, you can set it to work, adding a drop-down time-picker field to any webpage using jQuery and JavaScript. Open your HTML editor and enter the following lines of code to setup the JavaScript libraries and style sheets necessary to use Timepicker:

<script type="text/javascript" src="jquery.timepicker.js">// <![CDATA[

// ]]></script>
<script type="text/javascript" src="lib/base.js"></script>

For these links to work you will have to save the HTML file in the directory containing Timepicker, and save the Timepicker files in the same location relative to the page when you upload it to your website. Now, to implement jQuery Timepicker itself, enter the following lines of code:

<div id="container">
<div class="example">
<script type="text/javascript">// <![CDATA[
$(function() { $('#myPicker').timepicker(); });
// ]]></script>
<h3>My Timepicker</h3>
<input id="myPicker" class="time" type="text" /></div>
</div>

This will give you an extremely simple webpage: a grey box on a white screen with the text “My Timepicker” and a small white text field. Click inside this field, however, and you’ll get the first taste of Timepicker’s power — a drop-down list will appear with a list of times in half-hour increments, from midnight to 11:30 PM. Select one and it will appear in the field after the list is closed. The meat of jQuery Timepicker is included in the sixth line of body code. Timepicker can be given any number of options, placed between the final pair of parentheses. The “step” option allows you to determine the amount of time between list entries. Changing the line of code to

"$('#myPicker').timepicker({ 'step': 15 });"

will show the time in 15-minute increments. Setting “step” to 60 will show only one list item for each hour, and so on. The options “mintime” and “maxtime” set the starting and ending values of the list. Setting “showDuration” to true will show the time elapsed since the first time in the list, in parentheses, for each list entry. The option “timeFormat” allows you to change the way the times appear in the list using the PHP date formatting commands. You can combine as many options as necessary to achieve the look you want. Thus, to show the time in 20-minute increments from 9:00 AM to noon in military format (for example, 09:00:00), enter the following code:

$('#durationExample').timepicker({
'step': '20',
'minTime': '9:00am',
'maxTime': '12:00pm',
'timeFormat': 'H:i:s',
});

Of course, all of this would be useless if you couldn’t do anything with the values the user enters. jQuery Timepicker includes a number of methods to allow you to save user-entered values as variables and otherwise manipulate the timepickers on your page. “getTime” captures the current value as a JavaScript Date object, while “getSecondsFromMidnight” gets the value as an integer. You can treat the time as a string, too using jQuery’s own “val()” function. The method “setTime” will change the current time value in a picker, while “option” changes previously-set options and “remove” erases a timepicker element from the page.

Timepicker can handle events, as well: “showTimepicker” is called when the drop-down list appears, “hideTimepicker” when it is closed, and “changeTime” when the user selects a time from the list. Events and methods can work together to change the text in a <span> element, for example:

$('#myTimepicker').timepicker();
$('#myTimepicker').on('changeTime', function() {
   $('#mySpan').text($(this).val());
});

Consult the README.md file included in your Timepicker installation for complete documentation.