Rating: 4.1/5 (85 votes)

Time Picker

A time picker control. To open the calendar, click on the input box.

This control is also used as part of the date/time picker.


Time (AM/PM):

Time (24 hr):

Source Example

<html> <head> <script language="javascript" src="protoplasm.js"></script> <script language="javascript"> Protoplasm.use('timepicker').transform('input.timepicker'); </script> </head> <body> <input type="text" name="time" class="timepicker" /> </body> </html>


To create time pickers out of all elements that match a given CSS rule:

Protoplasm.use('timepicker').transform(selector[, options]);


Parameter Required Description
selector yes A CSS rule matching the text inputs to turn into time pickers
options no An object (hash) containing name/value pairs of additional options.

Available options:
icon The icon to display in the right side of the input box
format The time format for the input box. Defaults to 'HH:mm:ss'
use24hrs A boolean value determining whether to display the time in AM/PM or 24 hour notation. Defaults to false.
onChange A function to call when the active time changes. A date object is passed as a parameter.
onSelect A function to call when the user selects a time. A date object is passed as a parameter.

Manual Creation

If you want more control over creation and destruction of the time picker, you can instantiate it manually instead of using Protoplasm.transform.

In your <head> section:


To create a time picker:

var picker = new Control.TimePicker(element[, options]);

To destroy the time picker:


For more details, see the API documentation for Control.TimePicker.