jTimepicker

Yet another jQuery time picker plugin

Contents

  1. Introduction
  2. Examples
  3. Getting started
  4. Configuration
  5. Compatibility

Introduction

jTimepicker is a jQuery plugin for set hours, minutes and seconds individually with jQuery UI Slider.

Examples



Getting started

To use the jTimepicker plugin, include the jQuery library, the jTimepicker source file, the jTimepicker core stylesheet file and jQuery UI files inside the <head> tag of your HTML document: 

<link rel="stylesheet" type="text/css" href="css/ui/base/ui.core.css" />
<link rel="stylesheet" type="text/css" href="css/ui/base/ui.theme.css" />
<link rel="stylesheet" type="text/css" href="css/ui/base/ui.slider.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/ui.core.js"></script>
<script type="text/javascript" src="lib/ui.slider.js"></script>
<script type="text/javascript" src="lib/jquery.jtimepicker.js"></script>

To setup jTimepicker, add the following code inside the <head> tag of your HTML document: 

<script type="text/javascript">
    $(document).ready(function() {
        $('#timepicker').jtimepicker({
            // Configuration goes here
        });
    });
</script>

jTimepicker accepts a lot of configuration options, see chapter "Configuration" for further informations.

jTimepicker expects a very basic HTML markup structure inside your HTML document:

<div id="timepicker"></div>

Configuration

jTimepicker accepts a list of options to control the appearance and behaviour of the Time Picker. Here is the list of options you may set:

Property Type Default Description
clockIcon string "images/icon_clock_2.gif" Located in the images directory (icon_clock_1.gif, icon_clock_2.gif)
orientation string "horizontal" Change the orientation of the sliders (horizontal or vertical)
hourCombo string "hourcombo" Hour <select> tag class name selector
hourMode integer 24 Hour time format
hourInterval integer 1 Hour interval
hourDefaultValue integer 0 Set hour default value
hourSlider string "hourSlider" Hour slider class name selector
hourLabel string "hour" Hour slider label
minCombo string "mincombo" Minutes <select> tag class name selector
minLength integer 60 Minutes length
minInterval integer 5 Minutes interval
minDefaultValue integer 0 Set minutes default value
minSlider string "minSlider" Minutes slider class name selector
minLabel string "min" Minutes slider label
secView boolean true View Seconds <select>
secCombo string "seccombo" Seconds <select> tag class name selector
secLength integer 60 Seconds length
secInterval integer 5 Seconds interval
secDefaultValue integer 0 Set seconds default value
secSlider string "secSlider" Seconds slider class name selector
secLabel string "sec" Seconds slider label

Compatibility

jTimepicker has been tested and works on the following browsers: