new ng.TimePicker (Object options) vs. 1.1.1 Full+Lite

The JavaScript Time Picker component allows the user to select the time using a unique interface. Keeping with the traditional analog clock display with a modern twist. The Time Picker does not interfere with the user input and they can type in the time directly. However, it provide a quick view of available times and validate the user input.

Features

  • Classic design with a modern twist.
  • Set the start and end time, and times off
  • Customize the top hour to set the clock flow based on your options
  • Keyboard navigation for hours and minutes (based on the caret position).

Parameters

Object options vs. 1.1.1 Full+Lite
An optional object that holds the TimePicker properties.

Examples

Simple TimePicker
Demo:
Multiple Languages
In this example, we'll create multiple timepickers in different languages. This example is not available in the Lite version because additional languages are not loaded.
Demo:
Chinese:
Arabic:
Time Difference
In this example, we'll illustrate how to calculate the time difference between two time pickers
Demo:
Start time:
End time:

Inheritance Tree

This class inherits the following classes and all their methods and properties. It's recommended to check if any private properties/options are defined before using them. The complete list of inheritted methods and events are listed below the current object Custom Events.
ng.Events ()
ng.PlugIn (options)
ng.Component (options)
ng.TimePicker (options)

Methods

Function ng.TimePicker.select_time (time) vs. 1.1.1 Full+Lite
Select the given time (if selectable). If there is a selected time, it will be unselected. This method will fire the onSelect event.
Function ng.TimePicker.unselect_time () vs. 1.1.1 Full+Lite
Unselect the current selected time. This method will fire the onUnSelect event.
Function ng.TimePicker.is_time_off (time) vs. 1.1.1 Full+Lite
Check if the given time is within the selectable range (between the start and end values and not in a range off set).
Function ng.TimePicker.is_out_of_range (tiime) vs. 1.1.1 Full+Lite
Checks if the time is in a range off set.
Function ng.TimePicker.get_value () vs. 1.2.2 Full+Lite
Get the timestamp value of the selected time.
 
Function ng.TimePicker.set_start (time) vs. 1.1.1 Full+Lite
Sets the start option for the time picker.
Function ng.TimePicker.get_start () vs. 1.1.1 Full+Lite
Gets the start option for the time picker.
Function ng.TimePicker.set_end (time) vs. 1.1.1 Full+Lite
Sets the end option for the time picker.
Function ng.TimePicker.get_end () vs. 1.1.1 Full+Lite
Gets the eend option for the time picker.
Function ng.TimePicker.set_top_hour (hour) vs. 1.1.1 Full+Lite
Sets the top hour on the clock interface.
Function ng.TimePicker.get_top_hour () vs. 1.1.1 Full+Lite
Gets the top hour option for the time picker.
Function ng.TimePicker.set_range_off (range_off) vs. 1.1.1 Full+Lite
Sets the range off array for the time picker.
Function ng.TimePicker.get_range_off () vs. 1.1.1 Full+Lite
Gets the range off array for the time picker.
Function ng.TimePicker.set_format (format) vs. 1.1.1 Full+Lite
Sets the time format for the time picker. This format will be used to display the date for the user but not sent to the server.
Function ng.TimePicker.get_format () vs. 1.1.1 Full+Lite
Gets the format option for the time picker.
Function ng.TimePicker.set_server_format (format) vs. 1.1.1 Full+Lite
Sets the server time format for the time picker. This will format the value sent to the server.
Function ng.TimePicker.get_server_format () vs. 1.1.1 Full+Lite
Gets the server format option for the time picker.
Function ng.TimePicker.set_radius (radius) vs. 1.1.1 Full+Lite
Sets the clock radius.
Function ng.TimePicker.get_radius () vs. 1.1.1 Full+Lite
Gets the clock circle radius.
Function ng.TimePicker.set_sun (html) vs. 1.1.1 Full+Lite
Sets the HTML value for noon.
Function ng.TimePicker.get_sun () vs. 1.1.1 Full+Lite
Gets the HTML value for noon.
Function ng.TimePicker.set_moon (html) vs. 1.1.1 Full+Lite
Sets the HTML value for midnight.
Function ng.TimePicker.get_moon () vs. 1.1.1 Full+Lite
Gets the HTML value for midnight.
Function ng.TimePicker.set_always_simple (simple) vs. 1.1.1 FULL ONLY
Sets the always simple option for the time picker. This option forces the Time Picker to render a simple interface (square table instead of circled with rotation) regardless of browser support.
Function ng.TimePicker.get_always_simple () vs. 1.1.1 FULL ONLY
Gets the always simple option for the time picker.
Function ng.TimePicker.set_close_on_select (close_on_select) vs. 1.1.1 Full+Lite
Sets the close on select option for the time picker.
Function ng.TimePicker.get_close_on_select () vs. 1.1.1 Full+Lite
Gets the close on select option for the time picker.
Function ng.TimePicker.set_use24 (use24) vs. 1.1.3 Full+Lite
Set the use24 option for the time picker, which shows 24 hours format in the clock face plate.
Function ng.TimePicker.get_use24 () vs. 1.1.3 Full+Lite
Gets the use24 option for the time picker.

Custom Events

In the events' functions, the this will refer to the class object.
Event onSelect vs. 1.1.1 Full+Lite
Fires when the user select an value.
Event onUnSelect vs. 1.1.1 Full+Lite
Fires when a time is unselected (either by selecting a new time or the user clears the input field).
Event onChange vs. 1.1.1 Full+Lite
Fires when the user changes the value in the input field.
Event onSelectBeforeStart vs. 1.1.1 Full+Lite
Fires when the user type in a time before the start time or after the end time.
Event onSelectRangeOff vs. 1.1.1 Full+Lite
Fires when the user type in a time in a range off set. By default, the time picker will select the beginning or end of the range off depending on the user input.

ng.Events () Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Events.add_event (evt, func) vs. 1.1.0 Full+Lite
The add_event method will attach an event listener to an object. When the event is fired, the listeners functions will be executed on last added first run approach.
Function ng.Events.add_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.add_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.remove_event (evt, func) vs. 1.1.0 Full+Lite
Remove the function func from the event evt queue. When adding the event, you should add the function by reference. Anonymous functions cannot be removed.
Function ng.Events.remove_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.remove_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.clear_events (evt) vs. 1.1.0 Full+Lite
Remove all the functions under the event name evt.
Function ng.Events.clear_all_events () vs. 1.1.0 Full+Lite
This function works the same way Events.clear_events(evt) except it removes all the events attached to the object.
Function ng.Events.fire_event (evt_nm, args, evt) vs. 1.1.0 Full+Lite
Executes all the functions in the event evt_nm queue. Functions are executed in lasted added first exectued order.

ng.PlugIn (options) Methods

Some of these methods might be overriden by the inheriting class.
Function ng.PlugIn.get_position () vs. 1.1.0 Full+Lite
Get the plugin holding object position.
Function ng.PlugIn.get_width () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object width.
Function ng.PlugIn.get_heigh () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object height.
Function ng.PlugIn.set_object (obj) vs. 1.1.0 Full+Lite
Sets the ng.PlugIn holding HTML Element. The HTML Element should hold all the output and handles any events.
Function ng.PlugIn.get_object () vs. 1.1.0 Full+Lite
Gets the HTML Elements that holds the ng.PlugIn output.
Function ng.PlugIn.make_id (txt) vs. 1.1.0 Full+Lite
Creates a unique id for the ng.PlugIn object.
Function ng.PlugIn.get_id () vs. 1.1.0 Full+Lite
Get's the plugin ID.
Function ng.PlugIn.set_language (lang) vs. 1.1.0 Full+Lite
Sets the plugin language and reset the HTML Element direction based on the language.
Function ng.PlugIn.get_language () vs. 1.1.0 Full+Lite
Gets the plugin language.
Function ng.PlugIn.remove () vs. 1.1.0 Full+Lite
Removes the plugin and all it's properties. This method will also remove any HTML Elements that are associated with the plugin.
Function ng.PlugIn.create_options (options, default) vs. 1.1.2 Full+Lite
Create the initial options for the plugin. This method doesn not alter the plugin variables, but return an object that can be assigned to a variable in the plugin.
Function ng.PlugIn.create_events () vs. 1.1.2 Full+Lite
Create the plugin events from the customized option. This method should be called after ng.PlugIn.create_options.
Function ng.PlugIn.get (prop) vs. 1.2.2 Full+Lite
Gets the plugin property. This method will check if there is a getter function for the plugin and return it's value, otherwise it'll return the raw property. This method is useful for getting custom properties.
Function ng.PlugIn.set (prop, value) vs. 1.2.2 Full+Lite
Sets the plugin property. This method will check if there is a setter method for the plugin and call it. Otherwise, it will set the raw property value.This method is useful for setting custom properties.

ng.Component (options) Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Component.set () vs. 1.1.0 Full+Lite
Sets the ng.Component default values and prepare it's HTML structure.
Function ng.Component.set_parent (parent) vs. 1.1.0 Full+Lite
Sets the ng.Component parent object. This allows for nested components.
Function ng.Component.get_parent () vs. 1.1.0 Full+Lite
Gets the parent component.
Function ng.Component.get_parents_components () vs. 1.1.0 Full+Lite
Gets an array of all the component parents.
Function ng.Component.get_children_components () vs. 1.1.0 Full+Lite
Gets an array of all the children components.
Function ng.Component.set_html (html, append, eval_script) vs. 1.1.0 Full+Lite
Sets the component HTML code. Review ng.Element.set_html for more details.
Function ng.Component.get_html () vs. 1.1.0 Full+Lite
Gets the component HTML code.
Function ng.Component.open () vs. 1.1.0 Full+Lite
Opens the component and fires the onOpen event.
Function ng.Component.close () vs. 1.1.0 Full+Lite
Closes the component and fires the onClose event.
Function ng.Component.toggle () vs. 1.1.0 Full+Lite
Opens or closes the component.
Function ng.Component.reposition (obj) vs. 1.1.0 Full+Lite
Reposition the component based on the object position. This method is useful when the placement is the opposite to the language direction and the content changes regularly when the component is open.
Function ng.Component.get_content_div () vs. 1.2.0 Full+Lite
Get the div HTML Element that holds the component content.
Function ng.Component.set_button_ui_class () vs. 1.2.0 Full+Lite
Set the button UI CSS class name option.
Function ng.Component.get_button_ui_class () vs. 1.2.0 Full+Lite
Gets the buttons UI CSS class name.
Function ng.Component.is_open () vs. 1.1.0 Full+Lite
Checks if the component is open.
Function ng.Component.is_close () vs. 1.1.0 Full+Lite
Checks if the component is closed.
Function ng.Component.disable () vs. 1.1.0 Full+Lite
Disables the component and any associated buttons and input field. This method will first the onDisable event.
Function ng.Component.enable () vs. 1.1.0 Full+Lite
Enables the component and any associated buttons and input field. This method will fires the onEnable event.
Function ng.Component.is_enabled () vs. 1.1.0 Full+Lite
Checks if the component is enabled.
Function ng.Component.is_disabled () vs. 1.1.0 Full+Lite
Checks if the component is disabled.
Function ng.Component.set_input (object) vs. 1.1.0 Full+Lite
Sets the component input field. If the component already has an input set, it will remove the events from the original input field.
Function ng.Component.get_input () vs. 1.1.0 Full+Lite
Gets the input field for the component.
Function ng.Component.set_button (btn) vs. 1.1.0 Full+Lite
Sets the component button. When the ng.[NG[Link=Button]Button is clicked, it will toggle the component.
Function ng.Component.get_button () vs. 1.1.0 Full+Lite
Gets the components button.
Function ng.Component.set_placement (placement) vs. 1.1.0 Full+Lite
Sets the component placement.
Function ng.Component.get_placement () vs. 1.1.0 Full+Lite
Gets the component's placement.
Function ng.Component.set_offset (offset) vs. 1.1.0 Full+Lite
Sets the component's offset.
Function ng.Component.get_offset () vs. 1.1.0 Full+Lite
Gets the component's offset.
Function ng.Component.set_visible (visible) vs. 1.1.0 Full+Lite
Sets the component's visibility.
Function ng.Component.get_visible () vs. 1.1.0 Full+Lite
Gets the component visibility.
Function ng.Component.set_open_onfocus (open_focus) vs. 1.1.0 Full+Lite
Sets the component open_onfocus property.
Function ng.Component.get_open_onfocus () vs. 1.1.0 Full+Lite
Gets the component open_onfocus property.
Function ng.Component.set_open_onclick (open_click) vs. 1.1.0 Full+Lite
Sets the component open_onclick property.
Function ng.Component.get_open_onclick () vs. 1.1.0 Full+Lite
Gets the component open_onclick property.
Function ng.Component.get_input_html () vs. 1.1.4 Full+Lite
Get the HTML table code for an input field and button holder. The code will not contain the input or the button.

ng.PlugIn (options) Custom Events

In the events' functions, the this will refer to the class object.
Event onBeforeRemove vs. 1.2.2 Full+Lite
This event will fire right before the plugin (or any object that inherit it, e.g. components) is removed.

ng.Component (options) Custom Events

In the events' functions, the this will refer to the class object.
Event onOpen vs. 1.1.0 Full+Lite
Fires when the component is opened.
Event onClose vs. 1.1.0 Full+Lite
Fires when the component is closed.
Event onEnable vs. 1.1.0 Full+Lite
Fires when the component is enabled.
Event onDisable vs. 1.1.0 Full+Lite
Fires when the component is disabled.