JavaScript Time Picker

The first ever Time Picker that utilize a very easy drag and drop interface. With it's unique design, anyone can drag the minutes or hour hands independently to select a time.

Due to mootools breaking with new browsers, we are not providing our JavaScript tools at this time. New versions will be released soon

Latest News

Partners

Aveta Inc. Daniel E. Straus

Home Page JavaScript Tools JavaScript Time Picker

Features:

Easy to use and implement.
Independent hours and minutes hands.
Drag the clock hands to set the time.
Uses CSS spirits for faster loading time.
12 or 24 hour output with and AM and PM (translatable) ticker.

Requirements:

The color picker requires an XHTML doctype, which means your <html> tag should look like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Create It:

To create a time picker, you'll need to call the time picker class with three elements and a set of options.

Holding Element: the element that will hold the time picker parts.
Input Field: the input field that will take the time picker value. Can be null if no input field is required, just use the onChange event to populate any data.
Toggler: the element that will toggle the time picker on and off (if not visible). Can be null if no toggler is required, just use the openTimePicker and closeTimePicker functions to open and close the time picker.
Options

Example:
HTML:

<input type="text" name="time2" id="time2" /> <a href="#" id="time2_toggler">Open time picker</a>
<div id="time2_picker" class="time_picker_div"></div>
later
...
Script:
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true});

Try It:

Standard time picker (12 hours format):
Open time picker

24 hour format:
Open time picker

Stand alone (no input field and always visible):

Selected Time

Configurations:

You can customized the look and feel of the color picker by changing the images or creating new images using the PhotoShop files included in the resource directory. Also, there are some configuration options you can set when initiating the time picker by passing an options object.

Options objects are a key: value object with the following syntax

{option: value,
option: {option: value,
option: value},
option: [value1, value2]}

Option	Description	Default Value
visible	Indicates either the time picker would be visible or not.	false
Example: var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {visible:true});
offset	The timepicker by default will show at the lower left corner of the input field. offset allows for offsetting the time picker position.	{x:0, y:0}
Example: var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', { visible:true, offset:{x:50, y:25} });
startTime	The initial time (as an object) for the time picker (hour between 0 to 23, minute between 0 to 59)	current time
Example: var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', { startTime:{hour:10, minute:10} });
selectedTime	The initial seelcted time (as an object) for the time picker (hour between 0 to 23, minute between 0 to 59)	null
Example: var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', { selectedTime:{hour:5, minute:17} });
format24	Use a 24 hours format if true	false
Example: var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true});
imagesPath	The path to the images folder that hold the time picker images (without a trailing slash).	"time_picker_files/images"
Example: var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {imagesPath:"my_time_picker_files/images"});
faceImage	The clock face image.	"clock_face.gif"
hourHandImage	The hour hand image (one image for 12 hours using CSS spirits).	"clock_hours.gif"
minuteHandImage	The minute hand image (one image for 60 minutes using CSS spirits).	"clock_minutes.gif"
centerImage	The center image for the clock (the hands nob).	"clock_center.gif"
closeImage	The close image	"close_image.gif"
clockSize	Because there could be a delay in loading the images, the clockSize is the image faceImage size.	{width:142, height:142}
Example: var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', { clockSize:{width:50, height:50} });
hourHandSize	The width and height of the hourHangImage to show one hour (the total width divided by 12). Give or take 1 pixel.	{width:67, height:68}
minuteHandSize	The width and height of the minuteHangImage to show one minute (the total width divided by 60). Give or take 1 pixel.	{width:111, height:112}
centerSize	The width and height of the centerImage.	{width:7, height:6}
ampmStyles	The CSS style object for the AM/PM link.	{'fontSize':'10pt', 'fontWeight':'bold', 'color':'#999999', 'textDecoration':'none'}
lang	The language variables for AM/PM. Also used for user input.	{'am':'AM', 'pm':'PM'}
closeOpenTimePickers	Close all the open time pickers when the current time picker is open.	true
onOpen	Event that will be fired when the time picker is opened.	empty
onClose	Event that will be fired when the time picker is closed.	empty
onChange	Event that will be fired when the time is changed.	empty
Example: var tp = new TimePicker('time_picker', null, null, {onChange:function(){ if (this.time.hour < 12) var ampm = this.options.lang.am; else var ampm = this.options.lang.pm; var hour = this.time.hour%12; if (hour < 10) hour = "0"+hour; var minute = this.time.minute; if (minute < 10) minute = "0"+minute; $('time3_value').setHTML(hour+":"+minute+" "+ampm); } });