Protoplasm

4.1

Rating: 4.1/5 (34 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.

Demo

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>

Usage

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

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

Parameters:

Parameter

Required

Description

selector

yes

A CSS rule matching the text inputs to turn into time pickers

options

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:

Protoplasm.use('timepicker');

To create a time picker:

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

To destroy the time picker:

picker.destroy();