NoGray Time Picker
The first ever Time Picker that utilizes a very easy drag and drop interface. With its unique design, anyone can drag the minutes or hour hands independently to select a time.
Here is a quick list of 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}); 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]}
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); } });
Online Link: http://www.nogray.com/time_picker.php
--
--
Thanks & Regards,
B.Chandra Shekhar.
Software Engineer,
Jiva Infotech Pvt Ltd.
No comments:
Post a Comment