ui.igTimePicker

ui.igTimePicker_image

The igTimePicker control is an editor with time-only input and a drop-down with listed hours:minutes values. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following topic describes how to initialize the igTimePicker control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igTimePicker control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

	  <!doctype html>
			<html>
			<head>
					<title>Ignite UI igTimePicker</title>
					<!-- Infragistics Combined CSS -->
					<link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
					<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
					<!-- jQuery Core -->
					<script src="js/jquery.js" type="text/javascript"></script>
					<!-- jQuery UI -->
					<script src="js/jquery-ui.js" type="text/javascript"></script>
					<!-- Infragistics Combined Scripts -->
					<script src="js/infragistics.core.js" type="text/javascript"></script>
					<script src="js/infragistics.lob.js" type="text/javascript"></script>
					<script type="text/javascript">
							$(function () {
									$('#timePicker').igTimePicker({
										spinDelta:{
											hours: 1,
											minutes: 10,
										},
										buttonType: "spin",
										timeInputFormat: "HH:mm",
										timeDisplayFormat: "HH:mm"
									});
							});
					</script>
			</head>
			<body>
					<input id="timePicker" />
			</body>
			</html>

Related Samples

Related Topics

Dependencies

jquery.js
jquery.ui-1.9.0.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js
infragistics.ui.popover.js
infragistics.ui.notifier.js
infragistics.ui.validator.js

Inherits

  • allowNullValue
    Inherited

    Type:
    bool
    Default:
    false

    Gets/Sets whether the editor value can become null.
    If that option is false, and editor has no value, then value is set to an empty string.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					allowNullValue : false
				});

				//Get
				var allowNullValue = $(".selector").igTimePicker("option", "allowNullValue");

				//Set
				$(".selector").igTimePicker("option", "allowNullValue", false);

  • buttonType

    Type:
    enumeration
    Default:
    dropdown

    Gets visibility of the spin, clear and drop-down button. That option can be set only on initialization. Combinations like 'dropdown, clear' or 'spin, clear' are supported too. Note! This option can not be set runtime.
    Note! A combination like 'dropdown, spin' is not allowed.

    Members

    • dropdown
    • Type:string
    • A button to open/close the list is located on the right side of the editor.
    • clear
    • Type:string
    • A button to clear the value is located on the right side of the editor.
    • spin
    • Type:string
    • Spin buttons are located on the right side of the editor.

    Code Sample

     
					//Initialize
					$(".selector").igTimePicker({
						buttonType : "dropdown"
					});
					//Get
					var button = $(".selector").igTimePicker("option", "buttonType");
					//Initialize multiple buttons
					$(".selector").igTimePicker({
						buttonType : "dropdown,clear"
					});

  • centuryThreshold
    Inherited

    Type:
    number
    Default:
    29

    Gets/Sets year for auto detection of 20th and 21st centuries.
    That option is used to automatically fill century when the user entered only 1 or 2 digits into the year field or when the date pattern contains only 1 or 2 year positions, e.g. "yy" or "y".
    If user entered value larger than value of this option, then 20th century is used, otherwise the 21st.

    Code Sample

     
					//Initialize
					$(".selector").igTimePicker({
						centuryThreshold: 35
					});

					//Get
					var centuryThreshold = $(".selector").igTimePicker("option", "centuryThreshold");

					//Set
					$(".selector").igTimePicker("option", "centuryThreshold", 35);

  • dataMode
    Inherited

    Type:
    enumeration
    Default:
    date

    Gets the value type returned by the get of value() method and option. Also affects how the value is stored for form submit. The enableUTCDates option can be used to output an UTC ISO string instead.
    For example 10:00 AM from a client with local offset of 5 hours ahead of GMT will be serialized as:
    "2016-11-11T10:00:00+05:00".

    Members

    • date
    • Type:string
    • The value method returns a Date object. When this mode is set the value sent to the server on submit is serialized as ISO 8061 string with local time and zone values by default.
    • displayModeText
    • Type:string
    • The "text" in display mode (no focus) format (pattern) is used to be send to the server and is returned from the value() method (returns a string object).
    • editModeText
    • Type:string
    • The "text" in edit mode (focus) format (pattern) is used to be send to the server and is returned from the value() method (returns a string object).

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					dataMode: "editModeText"
				});
				//Get
				var dataMode = $(".selector").igTimePicker("option", "dataMode");

  • disabled
    Inherited

    Type:
    bool
    Default:
    false

    Gets/Sets the disabled attribute for the input. If set to true the input is disabled, and all buttons and interactions are disabled. On submitting the form the editor belongs to, the value is not submitted.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					disabled : false
				});

				//Get
				var disabled = $(".selector").igTimePicker("option", "disabled");

				//Set
				$(".selector").igTimePicker("option", "disabled", true);

  • dropDownAnimationDuration

    Type:
    number
    Default:
    300

    Gets/Sets show/hide drop-down list animation duration in milliseconds.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
				  dropDownAnimationDuration: 500
				});

				//Get
				var animationShowDuration= $(".selector").igTimePicker("option", "dropDownAnimationDuration");

				//Set
				$(".selector").igTimePicker("option", "dropDownAnimationDuration", 500);

  • dropDownAttachedToBody

    Type:
    bool
    Default:
    false

    Gets whether the drop-down list element is attached to the body of the document, or to the timepicker container element.
    If the option is set to false the timepicker will attach the drop-down list element to the timepicker container
    If the option is set to true the timepicker will attach its drop-down list to as a child of the body.
    Note! This option can not be set runtime.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					dropDownAttachedToBody : true
				});

				//Get
				var attachedToBody = $(".selector").igTimePicker("option", "dropDownAttachedToBody");

  • dropDownOrientation

    Type:
    enumeration
    Default:
    auto

    Gets/Sets the drop-down list opening orientation when the list gets open. If the option is set to auto the timepicker has priority to open the drop-down list bottom. If the space is not enough it tries to open the list top. If the space is not enough in both directions then the list gets opened at the bottom of the editor.

    Members

    • auto
    • Type:string
    • If the option is set to auto the timepicker has priority to open the drop-down list bottom. If the space is not enough it tries to open the list top. If the space is not enough in both directions then the list gets opened at the bottom of the editor.
    • bottom
    • Type:string
    • The drop-down list is opened at the bottom of the timepicker.
    • top
    • Type:string
    • The drop-down list is opened at the top of the timepicker.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					dropDownOrientation : "top"
				});
				//Get
				var orientation = $(".selector").igTimePicker("option", "dropDownOrientation");
				//Set
				$(".selector").igTimePicker("option", "dropDownOrientation", "bottom");

  • enableUTCDates
    Inherited

    Type:
    bool
    Default:
    false

    Enables/Disables serializing client date as UTC ISO 8061 string instead of using the local time and zone values.
    The option is only applied in "date" dataMode.

    Code Sample

     
					//Initialize
					$(".selector").igTimePicker({
						enableUTCDates : true
					});

					//Get
					var enableUTCDates = $(".selector").igTimePicker("option", "enableUTCDates");

					//Set
					$(".selector").igTimePicker("option", "enableUTCDates", true);

  • excludeKeys
    Inherited

    Type:
    string
    Default:
    null

    Gets ability to prevent entering specific characters from keyboard or on paste.
    Notes:
    If a character is specified in "includeKeys" option also, then "excludeKeys" has priority.
    Note! This option can not be se runtime.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					excludeKeys: "ABC"
				});

				//Get
				var excludedKeys= $(".selector").igTimePicker("option", "excludeKeys");

  • height
    Inherited

    Type:
    enumeration
    Default:
    null

    Gets/Sets the height of the control.

    Members

    • null
    • Type:object
    • will fit the editor inside its parent container, if no other heights are defined.
    • string
    • The height can be set in pixels (px) and percentage (%).
    • number
    • The height can be set as a number in pixels.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					height : 25
				});
				//Get
				var height = $(".selector").igTimePicker("option", "height");
				//Set
				$(".selector").igTimePicker("option", "height", 25);

  • includeKeys
    Inherited

    Type:
    string
    Default:
    null

    Gets ability to enter only specific characters in input-field from keyboard and on paste.
    Notes:
    If "excludeKeys" option contains same characters as this option, then "excludeKeys" has priority.
    Note! This option can not be se runtime.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					includeKeys: "ABC"
				});

				//Get
				var includedKeys= $(".selector").igTimePicker("option", "includeKeys");

  • inputName
    Inherited

    Type:
    string
    Default:
    null

    Gets/Sets the name attribute of the value input. This input is used to sent the value to the server. In case the target element is input and it has name attribute, but the developer has set the inputName option, so this option overwrites the value input and removes the attribute from the element.

    Code Sample

     
			//Initialize
				$(".selector").igTimePicker({
				  inputName : "textField"
				});

				//Get
				var inputName = $(".selector").igTimePicker("option", "inputName");

			//Set
			$(".selector").igTimePicker("option", "inputName", "textField");

  • isLimitedToListValues

    Type:
    bool
    Default:
    false

    Gets/Sets if the editor should only allow values from the list of items. Matching is case-insensitive.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					isLimitedToListValues : true
				});

				//Get
				var limited = $(".selector").igTimePicker("option", "isLimitedToListValues");

				//Set
				$(".selector").igTimePicker("option", "isLimitedToListValues", false);

  • itemsDelta

    Type:
    object
    Default:
    {}

    Gets delta-value which is used to generate the drop-down items for the time picker.
    Accepted values for deltas are positive integer numbers, and the fractional portion of floating point numbers is ignored.

    object A configuration object, which defines specific values for each time period. The option can accept the following format:
    itemsDelta: {
    hours: 0,
    minutes: 30,
    }
    Time periods that don't have values use 0 as default for hours and 30 for minutes.

    Code Sample

     
				//Initialize with object
				$(".selector").igTimePicker({
					itemsDelta: {
						hours: 0,
						minutes: 30,
					}
				});

				//Get
				var itemsDelta= $(".selector").igTimePicker("option", "itemsDelta");

    • hours

      Type:
      number
      Default:
      0

    • minutes

      Type:
      number
      Default:
      30

  • language
    Inherited

    Type:
    string
    Default:
    "en"

    Set/Get the locale language setting for the widget.

    Code Sample

     
					//Initialize
				$(".selector").igTimePicker({
					language: "ja"
				});

				// Get
				var language = $(".selector").igTimePicker("option", "language");

				// Set
				$(".selector").igTimePicker("option", "language", "ja");

  • limitSpinToCurrentField
    Inherited

    Type:
    bool
    Default:
    false

    Gets/Sets ability to modify only 1 date field on spin events.
    Value false enables changes of other date fields when incremented or decremented date-field reaches its limits.
    Value true modifies only value of one field.

    Code Sample

     
					//Initialize
					$(".selector").igTimePicker({
						limitSpinToCurrentField : true
					});

					//Get
					var limitSpinToCurrentField = $(".selector").igTimePicker("option", "limitSpinToCurrentField");

					//Set
					$(".selector").igTimePicker("option", "limitSpinToCurrentField", true);

  • listItemHoverDuration

    Type:
    number
    Default:
    0

    Gets/Sets the hover/unhover animation duration of a drop-down list item.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					listItemHoverDuration : 100
				});

				//Get
				var hoverDuration = $(".selector").igTimePicker("option", "listItemHoverDuration");

				//Set
				$(".selector").igTimePicker("option", "listItemHoverDuration", 100);

  • listWidth

    Type:
    number
    Default:
    0

    Gets/Sets custom width of the drop-down list in pixels. If the value is equal to 0 or negative, then the width of timepicker is set as a drop-down width.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					listWidth : 200
				});

				//Get
				var width = $(".selector").igTimePicker("option", "listWidth");

				//Set
				$(".selector").igTimePicker("option", "listWidth", 200);

  • locale
    Inherited

    Type:
    object
    Default:
    null

    Set/Get the locale setting for the widget.

    Code Sample

     
					//Initialize
				$(".selector").igTimePicker({
					locale: {}
				});

				// Get
				var locale = $(".selector").igTimePicker("option", "locale");

				// Set
				$(".selector").igTimePicker("option", "locale", {});

  • maxValue
    Inherited

    Type:
    date
    Default:
    null

    Gets the maximum value which can be entered in editor by user. Date object can be set as value. String value can be passed and the editor will use the javascript Date object constructor to create date object and will use it for the comparison. MVC date format can be used too.
    Note! This option doesn't use the dateInputFormat to extract the date.

    Code Sample

     
					//Initialize
					$(".selector").igTimePicker({
						maxValue: new Date(2020, 11, 21)
					});

					//Get
					var maxValue = $(".selector").igTimePicker("option", "maxValue");

					//Set
					$(".selector").igTimePicker("option", "maxValue", new Date(2020, 11, 21));

  • minValue
    Inherited

    Type:
    date
    Default:
    null

    Gets the minimum value which can be entered in editor by user. Date object can be set as value. String value can be passed and the editor will use the javascript Date object constructor to create date object and will use it for the comparison. MVC date format can be used too.
    Note! This option doesn't use the dateInputFormat to extract the date.

    Code Sample

     
					//Initialize
					$(".selector").igTimePicker({
						minValue: new Date(1980, 6, 1)
					});

					//Get
					var minValue = $(".selector").igTimePicker("option", "minValue");

					//Set
					$(".selector").igTimePicker("option", "minValue", new Date(1980, 6, 1));

  • nullValue
    Inherited

    Type:
    enumeration
    Default:
    null

    Gets/Sets the representation of null value. In case of default the value for the input is set to null, which makes the input to hold an empty string.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					nullValue : new Date(2015, 09, 08)
				});
				//Get
				var nullText = $(".selector").igTimePicker("option", "nullValue");
				//Set
				$(".selector").igTimePicker("option", "nullValue", new Date(2015, 09, 08));

  • placeHolder
    Inherited

    Type:
    string
    Default:
    null

    Gets/Sets the text which appears in the editor when it has no focus and the "value" is null or empty string.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					placeHolder : "Enter Value"
				});

				//Get
				var placeHolder = $(".selector").igTimePicker("option", "placeHolder");

				//Set
				$(".selector").igTimePicker("option", "placeHolder", "Enter Value");

  • preventSubmitOnEnter
    Inherited

    Type:
    bool
    Default:
    false

    Gets/Sets if the editor should prevent form submit when enter key is pressed.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
						preventSubmitOnEnter: true
				});

				//Get
				var preventSubmitOnEnter = $(".selector").igTimePicker("option", "preventSubmitOnEnter");

				//Set
				$(".selector").igTimePicker("option", "preventSubmitOnEnter", true);

  • readOnly
    Inherited

    Type:
    bool
    Default:
    false

    Gets/Sets the readonly attribute for the input. If set to true the input is readonly, and all buttons and interactions are disabled. On submitting the form the editor belongs to, the value is submitted.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					readOnly : true
				});

				//Get
				var readOnly = $(".selector").igTimePicker("option", "readOnly");

				//Set
				$(".selector").igTimePicker("option", "readOnly", true);

  • regional
    Inherited

    Type:
    enumeration
    Default:
    defaults

    Set/Get the regional setting for the widget.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					regional: "ja"
				});
				// Get
				var regional = $(".selector").igTimePicker("option", "regional");
				// Set
				$(".selector").igTimePicker("option", "regional", "ja");

  • revertIfNotValid
    Inherited

    Type:
    bool
    Default:
    true

    Gets/Sets if the editor should revert it's value to the previously valid value in case the value on blur, or enter key is not valid. If the option is set to false, editor calls clear functionality.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					revertIfNotValid : false
				});

				//Get
				var revertIfNotValid = $(".selector").igTimePicker("option", "revertIfNotValid");

				//Set
				$(".selector").igTimePicker("option", "revertIfNotValid", false);

  • selectionOnFocus
    Inherited

    Type:
    enumeration
    Default:
    selectAll

    Gets/Sets the action when the editor gets focused. The default value is selectAll.

    Members

    • selectAll
    • Type:string
    • Setting this option will select all the text into the editor when the edit mode gets entered.
    • atStart
    • Type:string
    • Setting this option will move the cursor at the beginning the text into the editor when the edit mode gets entered.
    • atEnd
    • Type:string
    • Setting this option will move the cursor at the end the text into the editor when the edit mode gets entered.
    • browserDefault
    • Type:string
    • Setting this option won't do any extra logic, but proceed with the browser default behavior.

    Code Sample

     
					//Initialize
					$(".selector").igTimePicker({
						selectionOnFocus: "atStart"
					});
					//Get
					var selectionOnFocus= $(".selector").igTimePicker("option", "selectionOnFocus");
					//Set
					$(".selector").igTimePicker("option", "selectionOnFocus", "selectAll");

  • spinDelta

    Type:
    enumeration
    Default:
    {}

    Gets/Sets delta-value which is used to increment or decrement the editor time on spin actions. When not editing (focused) the delta is applied on the day if available in the input mask or the lowest available period.
    When in edit mode the time period, where the cursor is positioned, is incremented or decremented with the defined delta value.
    Accepted values for deltas are positive integer numbers, and the fractional portion of floating point numbers is ignored.
    spinDelta: {
    hours: 12,
    minutes: 15
    }
    Default value is {hours: 1, minutes: 30}.

    Code Sample

     
				//Initialize with number
				$(".selector").igTimePicker({
					spinDelta: 10
				});
				//Initialize with object
				$(".selector").igTimePicker({
					spinDelta: {
						hours: 12,
						minutes: 15
					}
				});
				//Get
				var spinDelta= $(".selector").igTimePicker("option", "spinDelta");
				//Set with number
				$(".selector").igTimePicker("option", "spinDelta", 10);
				//Set with object
				$(".selector").igTimePicker("option", "spinDelta", { minutes: 15 });

    • hours

      Type:
      number
      Default:
      1

    • minutes

      Type:
      number
      Default:
      30

  • spinWrapAround

    Type:
    bool
    Default:
    true

    Gets/Set the ability of the editor to automatically set value in the editor to the opposite side of the limit, when the spin action reaches minimum or maximum limit.
    This applies to minValue and maxValue or cycling through list items if isLimitedToListValues is enabled.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					spinWrapAround : true
				});

				//Get
				var spinAround = $(".selector").igTimePicker("option", "spinWrapAround");

				//Set
				$(".selector").igTimePicker("option", "spinWrapAround", true);

  • suppressKeyboard

    Type:
    bool
    Default:
    false

    Gets/Sets whether the onscreen keyboard (if available on device) should be shown when the dropdown button is clicked/tapped. This option prevents initial focus or removes it when the drop button is clicked/tapped.
    Note: The option does not perform device detection so its behavior is always active if enabled.
    Note: When drop down is opened the only way to close it will be using the drop down button.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					suppressKeyboard : true
				});

				//Get
				var readOnly = $(".selector").igTimePicker("option", "suppressKeyboard");

				//Set
				$(".selector").igTimePicker("option", "suppressKeyboard", true);

  • suppressNotifications
    Inherited

    Type:
    bool
    Default:
    false

    Disables/Enables default notifications for basic validation scenarios built in the editors such as required list selection, value wrapping around or spin limits.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					suppressNotifications : true
				});

				//Get
				var suppressNotifications = $(".selector").igTimePicker("option", "suppressNotifications");

				//Set
				$(".selector").igTimePicker("option", "suppressNotifications", true);

  • tabIndex
    Inherited

    Type:
    number
    Default:
    null

    Gets/Sets tabIndex attribute for the editor input.

    Code Sample

     
			  //Initialize
			  $('.selector').igTimePicker({
				  tabIndex: 1
			  });

			  //Get
			  var tabIndex = $(".selector").igTimePicker("option", "tabIndex");

			  //Set
			  $(".selector").igTimePicker("option", "tabIndex", 1);

  • textAlign
    Inherited

    Type:
    enumeration
    Default:
    left

    Gets/Sets the horizontal alignment of the text in the editor.

    Members

    • left
    • Type:string
    • The text into the input gets aligned to the left.
    • right
    • Type:string
    • The text into the input gets aligned to the right.
    • center
    • Type:string
    • The text into the input gets aligned to the center.

    Code Sample

     
					//Initialize
					$(".selector").igTimePicker({
						textAlign : "center"
					});
					//Get
					var align = $(".selector").igTimePicker("option", "textAlign");
					//Set
					$(".selector").igTimePicker("option", "textAlign", "center");

  • timeDisplayFormat

    Type:
    string
    Default:
    null

    Gets/Sets format of time while timepicker has no focus.
    Value of that option can be set to a specific time pattern or to a flag defined by regional settings.
    If value is not set, then the timeInputFormat is used automatically.
    If value is set to explicit time pattern and pattern besides time-flags has explicit characters which match with time-flags or mask-flags, then the "escape" character should be used in front of them.
    List of predefined regional flags:
    "time": the timePattern member of regional option is used
    List of explicit characters, which should have escape \\ character in front of them:
    C, &, a, A, ?, L, 9, 0, #, >, <, y, M, d, h, H, m, s, t, f.
    List of time-flags when explicit time pattern is used:
    "t": first character of string which represents AM/PM field
    "tt": 2 characters of string which represents AM/PM field
    "h": hours field in 12-hours format without leading zero
    "hh": hours field in 12-hours format with leading zero
    "H": hours field in 24-hours format without leading zero
    "HH": hours field in 24-hours format with leading zero
    "m": minutes field without leading zero
    "mm": minutes field with leading zero.

    Code Sample

     
					//Initialize
					$(".selector").igTimePicker({
						timeDisplayFormat: "time"
					});

					//Get
					var timeDisplayFormat = $(".selector").igTimePicker("option", "timeDisplayFormat");

					//Set
					$(".selector").igTimePicker("option", "timeDisplayFormat", "time");

  • timeInputFormat

    Type:
    string
    Default:
    "time"

    Gets format of time while timepicker has focus.
    Value of that option can be set to explicit time pattern or to a flag defined by regional settings.
    If value is set to explicit time pattern and pattern besides date-flags has explicit characters which match with time-flags or mask-flags, then the "escape" character should be used in front of them.
    If option is not set, then the "time" is used automatically.
    List of predefined regional flags:
    "time": the timePattern member of regional option is used
    List of explicit characters, which should have escape \\ character in front of them: C, &, a, A, ?, L, 9, 0, #, >, <, y, M, d, h, H, m, s, t, f.
    List of time-flags when explicit time pattern is used:
    "t": first character of string which represents AM/PM field
    "tt": 2 characters of string which represents AM/PM field
    "hh": hours field in 12-hours format with leading zero
    "HH": hours field in 24-hours format with leading zero
    "mm": minutes field with leading zero
    Note! This option can not be set runtime.

    Code Sample

     
					//Initialize
					$(".selector").igTimePicker({
						timeInputFormat : "time"
					});

					//Get
					var timeInputFormat = $(".selector").igTimePicker("option", "timeInputFormat");

  • validatorOptions
    Inherited

    Type:
    object
    Default:
    null

    Gets/Sets options supported by the igValidator widget.
    Note: Validation rules of igValidator, such as min and max value/length are applied separately triggering errors,
    while the corresponding options of the editor prevent values violating the defined rules from being entered.

    Code Sample

     
					//Initialize
					$(".selector").igTimePicker({
						validatorOptions : {
							successMessage: "Success",
									 required: true,
									 onchange: true,
							notificationOptions: { mode: "popover" }
						}
					});

					//Get
					var validateOptions = $(".selector").igTimePicker("option", "validatorOptions");

					//Set
					$(".selector").igTimePicker("option", "validatorOptions", {onblur: true, onchange: true});

  • value
    Inherited

    Type:
    date
    Default:
    null

    Gets/Sets the value of the editor. Date object can be set as value. String can be set and the editor will pass it to the Date object constructor and use the corresponding Date object as the value. MVC date format can be used too.
    Note! This option doesn't use the dateInputFormat to extract the date.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					value : new Date (2015, 11, 11)
				});

				//Get
				var value = $(".selector").igTimePicker("option", "value");

				//Set
				$(".selector").igTimePicker("option", "value", new Date (2015, 11, 11));

  • visibleItemsCount

    Type:
    number
    Default:
    5

    Gets the number of the items to be shown at once when the drop-down list get opened.
    Notes:
    This option is overwritten if the number of list items is less than the set value. In that case the drop-down list displays all the items.
    This option can not be set runtime.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					visibleItemsCount : 5
				});

				//Get
				var visibleItemsCount = $(".selector").igTimePicker("option", "visibleItemsCount");

  • width
    Inherited

    Type:
    enumeration
    Default:
    null

    Gets/Sets the width of the control.

    Members

    • null
    • Type:object
    • will stretch to fit data, if no other widths are defined.
    • string
    • The widget width can be set in pixels (px) and percentage (%).
    • number
    • The widget width can be set as a number in pixels.

    Code Sample

     
				//Initialize
				$(".selector").igTimePicker({
					width : 200
				});
				//Get
				var width = $(".selector").igTimePicker("option", "width");
				//Set
				$(".selector").igTimePicker("option", "width", 200);

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

  • blur
    Inherited

    Cancellable:
    false

    Fired when the input field of the editor loses focus.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • element
          Type: Object

          Gets a reference to the event target.

        • editorInput
          Type: Object

          Gets a reference to the editor input field.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickerblur", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					blur: function (evt, ui) {
						...
					}
				});

  • dropDownItemSelected

    Cancellable:
    false

    Fired after an item in the drop down list is selected.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • editorInput
          Type: Object

          Gets a reference to the editable input.

        • list
          Type: Object

          Gets a reference to the list container.

        • item
          Type: Object

          Gets a reference to the list item which is selected.

    Code Sample

     
				//Delegate
				$(".selector").on("igtimepickerdropdownitemselected", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					dropDownItemSelected: function (evt, ui) {
					...
					}
				});

  • dropDownItemSelecting

    Cancellable:
    true

    Fired when an item in the drop down list is being selected.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • editor
          Type: Object

          Gets a reference to the editor container.

        • editorInput
          Type: Object

          Gets a reference to the editable input.

        • list
          Type: Object

          Gets a reference to the list container.

        • item
          Type: Object

          Gets a reference to the list item which is about to be selected.

    Code Sample

     
				//Delegate
				$(".selector").on("igtimepickerdropdownitemselecting", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					dropDownItemSelecting: function (evt, ui) {
					...
					}
				});

  • dropDownListClosed

    Cancellable:
    false

    Fired after the drop down is closed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • editor
          Type: Object

          Gets a reference to the editor container.

        • editorInput
          Type: Object

          Gets a reference to the editable input.

        • list
          Type: Object

          Gets a reference to the list container.

    Code Sample

     
				//Delegate
				$(".selector").on("igtimepickerdropdownlistclosed", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					dropDownListClosed: function (evt, ui) {
					...
					}
				});

  • dropDownListClosing

    Cancellable:
    true

    Fired when the drop down is closing.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • editor
          Type: Object

          Gets a reference to the editor container.

        • editorInput
          Type: Object

          Gets a reference to the editable input.

        • list
          Type: Object

          Gets a reference to the list container.

    Code Sample

     
				//Delegate
				$(".selector").on("igtimepickerdropdownlistclosing", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					dropDownListClosing: function (evt, ui) {
					...
					}
				});

  • dropDownListOpened

    Cancellable:
    true

    Fired after the drop down is opened.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • editorInput
          Type: Object

          Gets a reference to the editable input.

        • list
          Type: Object

          Gets a reference to the list container.

    Code Sample

     
				//Delegate
				$(".selector").on("igtimepickerdropdownlistopened", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					dropDownListOpened: function (evt, ui) {
					...
					}
				});

  • dropDownListOpening

    Cancellable:
    true

    Fired when the drop down is opening.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • editor
          Type: Object

          Gets a reference to the editor container.

        • editorInput
          Type: Object

          Gets a reference to the editable input.

        • list
          Type: Object

          Gets a reference to the list container.

    Code Sample

     
				//Delegate
				$(".selector").on("igtimepickerdropdownlistopening", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					dropDownListOpening: function (evt, ui) {
					...
					}
				});

  • focus
    Inherited

    Cancellable:
    false

    Fired when the input field of the editor gets focus.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • element
          Type: Object

          Gets a reference to the event target.

        • editorInput
          Type: Object

          Gets a reference to the editor input field.

        • originalEvent
          Type: Object

          Gets a reference to the event object of the browser.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickerfocus", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					focus: function (evt, ui) {
						...
					}
				});

  • keydown
    Inherited

    Cancellable:
    true

    Fired on keydown event.
    Return false in order to cancel key action.

    • evt
      Type: Event

      JQuery event object. Use evt.originalEvent to obtain reference to event of the browser.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • element
          Type: Object

          Gets a reference to the event target.

        • editorInput
          Type: Object

          Gets a reference to the editor input field.

        • key
          Type: Object

          Gets the value of the keyCode.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickerkeydown", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					keydown: function (evt, ui) {
						...
					}
				});

  • keypress
    Inherited

    Cancellable:
    true

    Fired on keypress event.
    Return false in order to cancel key action.

    • evt
      Type: Event

      JQuery event object. Use evt.originalEvent to obtain reference to event of the browser.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • element
          Type: Object

          Gets a reference to the event target.

        • editorInput
          Type: Object

          Gets a reference to the editor input field.

        • key
          Type: Object

          Gets the value of the keyCode.

        • originalEvent
          Type: Object

          Gets a reference to the event object of the browser.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickerkeypress", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					keypress: function (evt, ui) {
						...
					}
				});

  • keyup
    Inherited

    Cancellable:
    false

    Fired on keyup event.

    • evt
      Type: Event

      JQuery event object. Use evt.originalEvent to obtain reference to event of the browser.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • element
          Type: Object

          Gets a reference to the event target.

        • editorInput
          Type: Object

          Gets a reference to the editor input field.

        • key
          Type: Object

          Gets the value of the keyCode.

        • originalEvent
          Type: Object

          Gets a reference to the event object of the browser.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickerkeyup", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					keyup: function (evt, ui) {
						...
					}
				});

  • mousedown
    Inherited

    Cancellable:
    true

    Fired on mousedown event.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • element
          Type: Object

          Gets a reference to the event target.

        • editorInput
          Type: Object

          Gets a reference to the editor input field.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickermousedown", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					mousedown: function (evt, ui) {
						...
					}
				});

  • mousemove
    Inherited

    Cancellable:
    false

    Fired on mousemove at any part of editor including the drop-down list.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • element
          Type: Object

          Gets a reference to the event target.

        • editorInput
          Type: Object

          Gets a reference to the editor input field.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickermousemove", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					mousemove: function (evt, ui) {
						...
					}
				});

  • mouseout
    Inherited

    Cancellable:
    false

    Fired on mouseleave at any part of editor including the drop-down list.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • element
          Type: Object

          Gets a reference to the event target.

        • editorInput
          Type: Object

          Gets a reference to the editor input field.

        • originalEvent
          Type: Object

          Gets a reference to the event object of the browser.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickermouseout", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					mouseout: function (evt, ui) {
						...
					}
				});

  • mouseover
    Inherited

    Cancellable:
    false

    Fired on mouseover at any part of editor including the drop-down list.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • element
          Type: Object

          Gets a reference to the event target.

        • editorInput
          Type: Object

          Gets a reference to the editor input field.

        • originalEvent
          Type: Object

          Gets a reference to the event object of the browser.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickermouseover", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					mouseover: function (evt, ui) {
						...
					}
				});

  • mouseup
    Inherited

    Cancellable:
    false

    Fired on mouseup event.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • element
          Type: Object

          Gets a reference to the event target.

        • editorInput
          Type: Object

          Gets a reference to the editor input field.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickermouseup", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					mouseup: function (evt, ui) {
						...
					}
				});

  • rendered
    Inherited

    Cancellable:
    false

    Fired after rendering of the editor has finished.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor performing rendering.

        • element
          Type: Object

          Gets a reference to the editor element.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickerrendered", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					rendered: function (evt, ui) {
						...
					}
				});

  • rendering
    Inherited

    Cancellable:
    true

    Fired before rendering of the editor has finished.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor performing rendering.

        • element
          Type: Object

          Gets a reference to the editor element.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickerrendering", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					rendering: function (evt, ui) {
						...
					}
				});

  • textChanged
    Inherited

    Cancellable:
    false

    Fired after the editor's text has been changed. It can be raised when keyUp event occurs,
    when the clear button is clicked or when an item from a list is selected.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • text
          Type: String

          Gets a reference to the new text.

        • oldText
          Type: String

          Gets a reference to the old text.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickertextchanged", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					textChanged: function (evt, ui) {
					...
					}
				});

  • valueChanged
    Inherited

    Cancellable:
    false

    Fired after the editor value is changed. It can be raised after loosing focus or on spin events.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • editorInput
          Type: Object

          Gets the editor input.

        • newValue
          Type: Object

          Gets the value entered from the user after internal formatting. The argument type might differ depending on the editor type.

        • originalValue
          Type: Object

          Gets the value entered from the user before internal formatting. The argument type might differ depending on the editor type.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickervaluechanged", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					valueChanged: function (evt, ui) {
						...
					}
				});

  • valueChanging
    Inherited

    Cancellable:
    true

    Fired before changing the editor's value.
    Return false in order to cancel change.
    It can be raised after loosing focus or on spin events.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the editor.

        • editorInput
          Type: Object

          Gets the editor input.

        • newValue
          Type: Object

          Gets the editor's new value. The argument type might differ depending on the editor type.

        • oldValue
          Type: Object

          Gets the editor's old value. The argument type might differ depending on the editor type.

    Code Sample

     
				//Bind after initialization
				$(".selector").on("igtimepickervaluechanging", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igTimePicker({
					valueChanging: function (evt, ui) {
						...
					}
				});

  • changeGlobalLanguage
    Inherited

    .igTimePicker( "changeGlobalLanguage" );

    Changes the widget language to global language. Global language is the value in $.ig.util.language.

    Code Sample

     
				$(".selector").igTimePicker("changeGlobalLanguage");

  • changeGlobalRegional
    Inherited

    .igTimePicker( "changeGlobalRegional" );

    Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.

    Code Sample

     
				$(".selector").igTimePicker("changeGlobalRegional");

  • changeLocale
    Inherited

    .igTimePicker( "changeLocale" );

    Changes the all locales into the widget element to the language specified in options.language
    Note that this method is for rare scenarios, see language or locale option setter.

    Code Sample

     
				$(".selector").igTimePicker("changeLocale");

  • changeRegional
    Inherited

    .igTimePicker( "changeRegional" );

    Changes the the regional settings of widget element to the language specified in options.regional
    Note that this method is for rare scenarios, use regional option setter.

    Code Sample

     
				$(".selector").igTimePicker("changeRegional");

  • clearButton
    Inherited

    .igTimePicker( "clearButton" );
    Return Type:
    jquery
    Return Type Description:
    Returns a reference to the jquery object.

    Returns a reference to the clear button UI element of the editor.

    Code Sample

     
			var button =  $(".selector").igTimePicker("clearButton");

  • destroy
    Inherited

    .igTimePicker( "destroy" );

    Destroys the widget.

    Code Sample

     
					$(".selector").igTimePicker("destroy");

  • displayValue
    Inherited

    .igTimePicker( "displayValue" );
    Return Type:
    string
    Return Type Description:
    Visible text of the editor.

    Gets the visible text in the editor.

    Code Sample

      $(".selector").igTimePicker("displayValue");

  • dropDownButton

    .igTimePicker( "dropDownButton" );
    Return Type:
    jquery
    Return Type Description:
    Returns reference to jquery object.

    Returns a reference to the drop-down button UI element of the editor.

    Code Sample

     
			var button = $(".selector").igTimePicker("dropDownButton");

  • dropDownContainer

    .igTimePicker( "dropDownContainer" );
    Return Type:
    jquery
    Return Type Description:
    Returns reference to jquery object.

    Gets reference to jquery object which is used as container of drop-down list.

    Code Sample

     
				 $(".selector").igTimePicker("dropDownContainer");

  • dropDownVisible

    .igTimePicker( "dropDownVisible" );
    Return Type:
    bool
    Return Type Description:
    The visibility state of the calendar.

    Returns the visibility state of the calendar.

    Code Sample

     
			$(".selector").igTimePicker("dropDownVisible");

  • editorContainer
    Inherited

    .igTimePicker( "editorContainer" );
    Return Type:
    jquery
    Return Type Description:
    The container editor element.

    Gets a reference to the jQuery element that wraps the editor.

    Code Sample

     
			$(".selector").igTimePicker("editorContainer");

  • field
    Inherited

    .igTimePicker( "field" );
    Return Type:
    jquery
    Return Type Description:
    The visual editor element.

    Gets the input element of the editor.

    Code Sample

     
			$(".selector").igTimePicker("field");

  • findListItemIndex

    .igTimePicker( "findListItemIndex", text:string, [matchType:object] );
    Return Type:
    number
    Return Type Description:
    Returns index of the found item.

    Finds index of list item by text that matches with the search parameters.

    • text
    • Type:string
    • The text to search for in the drop down list.
    • matchType
    • Type:object
    • Optional
    • The rule that is applied for searching the text.

    Code Sample

     
				var item =  $(".selector").igTimePicker("findListItemIndex");

  • getSelectedDate
    Inherited

    .igTimePicker( "getSelectedDate" );
    Return Type:
    date

    Gets selected date as a date object. This method can be used when dataMode is set as either displayModeText or editModeText.
    In such cases the value() method will not return date object and getSelectedDate() can be used to replace that functionality.

    Code Sample

     
			$(".selector").igTimePicker("getSelectedDate");

  • getSelectedListItem

    .igTimePicker( "getSelectedListItem" );
    Return Type:
    jquery
    Return Type Description:
    Selected list item.

    Gets the selected list item.

    Code Sample

     
			var selectedItem =  $(".selector").igTimePicker("getSelectedListItem");

  • getSelectedText
    Inherited

    .igTimePicker( "getSelectedText" );
    Return Type:
    string
    Return Type Description:
    Selected text in editor.

    Gets the selected text from the editor in edit mode. This can be done inside key event handlers, like keydown or keyup. This method can be used only when the editor is focused. If you invoke this method in display mode, when the editor input is blurred, the returned value will be an empty string.

    Code Sample

     
			var text =  (".selector").igTimePicker("getSelectedText");

  • getSelectionEnd
    Inherited

    .igTimePicker( "getSelectionEnd" );
    Return Type:
    number
    Return Type Description:
    End index of the selected text in the editor.

    Gets the end index of the selected text in the editor.

    Code Sample

     
			var index = $(".selector").igTimePicker("getSelectionEnd");

  • getSelectionStart
    Inherited

    .igTimePicker( "getSelectionStart" );
    Return Type:
    number
    Return Type Description:
    Start index of the selected text in the editor.

    Gets the start index of the selected text in the editor.

    Code Sample

     
			var index = $(".selector").igTimePicker("getSelectionStart");

  • hasFocus
    Inherited

    .igTimePicker( "hasFocus" );
    Return Type:
    bool
    Return Type Description:
    Returns if the editor is focused or not.

    Gets whether the editor has focus.

    Code Sample

     
				$(".selector").igTimePicker("hasFocus");

  • hide
    Inherited

    .igTimePicker( "hide" );

    Hides the editor.

    Code Sample

     
			$(".selector").igTimePicker("hide");

  • inputName
    Inherited

    .igTimePicker( "inputName", [newValue:string] );
    Return Type:
    string
    Return Type Description:
    Current input name.

    Gets/Sets name attribute applied to the editor element.

    • newValue
    • Type:string
    • Optional
    • The new input name.

    Code Sample

     
				$(".selector").igTimePicker("inputName", "checkbox");

  • insert
    Inherited

    .igTimePicker( "insert", string:string );

    Inserts the text at the location of the caret or over the current selection. If the editor is focused the method will insert the text over the current selection. If the editor is not focused the method will set the text as value of the editor.
    Note: The method raises textChanged event.

    • string
    • Type:string
    • The string to be inserted.

    Code Sample

     
				$('.selector').igTimePicker({
					blur: function (evt, ui) {
						// insert 0 as the user leaves the field
						ui.owner.insert("0");
					}
				});
				$(".selector").igTimePicker("insert", "20");

  • isValid
    Inherited

    .igTimePicker( "isValid" );
    Return Type:
    bool
    Return Type Description:
    Whether editor value is valid or not.

    Checks if the value in the editor is valid. Note: This function will not trigger automatic notifications.

    Code Sample

     
				var isValid = $(".selector").igTimePicker("isValid");

  • select
    Inherited

    .igTimePicker( "select", start:number, end:number );

    Selects the text between start and end indices in the editor. If the parameters are equal, then the method sets location of caret. The method has effect only when the editor has focus.

    • start
    • Type:number
    • Start of the selection.
    • end
    • Type:number
    • End of the selection.

    Code Sample

     
				$(".selector").igTimePicker("select", 2, 4);

  • selectedListIndex

    .igTimePicker( "selectedListIndex", [index:number] );
    Return Type:
    number
    Return Type Description:
    Returns the selected index.

    Gets the index of the selected list item. Sets selected item by index.

    • index
    • Type:number
    • Optional
    • The index of the item that needs to be selected.

    Code Sample

     
				$(".selector").igTimePicker("selectedListIndex", 1);
				var selectedIndex = $(".selector").igTimePicker("selectedListIndex");

  • setFocus
    Inherited

    .igTimePicker( "setFocus", [delay:number] );

    Sets focus to the editor after the specified delay.

    • delay
    • Type:number
    • Optional
    • The delay before focusing the editor.

    Code Sample

     
				$(".selector").igTimePicker("setFocus", 200);

  • show
    Inherited

    .igTimePicker( "show" );

    Shows the editor.

    Code Sample

     
			$(".selector").igTimePicker(("show");

  • spinDown
    Inherited

    .igTimePicker( "spinDown", [delta:number] );

    Decreases the date or time period, depending on the current cursor position.

    • delta
    • Type:number
    • Optional
    • The decrease delta.

    Code Sample

     
				$(".selector").igTimePicker("spinDown", 3);

  • spinDownButton
    Inherited

    .igTimePicker( "spinDownButton" );
    Return Type:
    jquery
    Return Type Description:
    The jQuery object representing the spin down UI element of the editor.

    Returns a reference to the spin down UI element of the editor.

    Code Sample

     
				$(".selector").igTimePicker("spinDownButton");

  • spinUp
    Inherited

    .igTimePicker( "spinUp", [delta:number] );

    Increases the date or time period, depending on the current cursor position.

    • delta
    • Type:number
    • Optional
    • The increase delta.

    Code Sample

     
				$(".selector").igTimePicker("spinUp", 2);

  • spinUpButton
    Inherited

    .igTimePicker( "spinUpButton" );
    Return Type:
    jquery
    Return Type Description:
    The jQuery object representing the spin up UI element of the editor.

    Returns a reference to the spin up UI element of the editor.

    Code Sample

     
			$(".selector").igTimePicker("spinUpButton");

  • validate
    Inherited

    .igTimePicker( "validate" );
    Return Type:
    bool
    Return Type Description:
    Whether editor value is valid or not.

    Triggers validation for the editor. If validatorOptions are set will also call validate on the igValidator.

    Code Sample

     
				var valid = $(".selector").igTimePicker("validate");

  • validator
    Inherited

    .igTimePicker( "validator" );
    Return Type:
    object
    Return Type Description:
    Returns reference to igValidator or null.

    Gets a reference to igValidator used by the editor.

    Code Sample

     
					var validator = $(".selector").igTimePicker("validator");

  • value

    .igTimePicker( "value", newValue:object );

    • newValue
    • Type:object

  • ui-state-active

    Class applied to the top element when editor is active. Default value is 'ui-state-active'.

  • ui-igedit-button-common ui-unselectable

    Class applied commonly to all the button containers, Default value is 'ui-igedit-button-common ui-unselectable ui-igedit-button-ltr ui-state-default'.

  • ui-igedit-buttonhover ui-state-hover

    Classes applied to the SPAN element of button in mouse-over state. Default value is 'ui-igedit-buttonhover ui-state-hover'.

  • ui-igedit-buttonpressed ui-state-highlight

    Classes applied to the SPAN element of button in pressed state. Default value is 'ui-igedit-buttonpressed ui-state-highlight'.

  • ui-igedit-cleararea ui-state-default

    Class applied to the div holding the clear button. Default value is 'ui-igedit-cleararea ui-state-default'.

  • ui-igedit-buttonimage ui-icon-circle-close

    Class applied to the div holding the clear button image. Default value is 'ui-igedit-buttonimage ui-icon-circle-close ui-icon ui-igedit-buttondefault'.

  • ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default

    Class applied to the top element when editor is rendered in container. Default value is 'ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default'.

  • ui-state-disabled

    Classes applied to the editing element in disabled state. Default value is 'ui-igedit-disabled ui-state-disabled'.

  • ui-igedit-dropdown-button

    Class applied to the div holding the drop down button. Default value is 'ui-igedit-dropdown-button'.

  • ui-icon ui-icon-triangle-1-s ui-igedit-buttonimage

    Class applied to the div holding the drop down button image. Default value is 'ui-icon ui-icon-carat-1-s ui-igedit-buttonimage'.

  • ui-igedit-dropdown ui-widget

    Class applied to the container holding the listitems. Default value is 'ui-igedit-dropdown'.

  • ui-igedit-input

    Class applied to the main/top element. Default value is 'ui-igedit-input'.

  • ui-igeditor-input-container ui-corner-all

    Class applied to the div which wraps the editable input (in case of multiline textarea). Default value is "ui-igeditor-input-container ui-corner-all".

  • ui-state-focus

    Class applied to the top element when editor is on focus. Default value is 'ui-state-focus'.

  • ui-state-hover

    Class applied to the top element when editor is hovered. Default value is 'ui-state-hover'.

  • ui-igedit-listitem ui-state-default

    Class applied to the SPAN element which represents item in dropdown list. Default value is 'ui-igedit-listitem ui-state-default'.

  • ui-state-active ui-igedit-listitemactive

    Class applied to the Class applied to the SPAN element which represents active item in dropdown list. Default value is 'ui-igedit-listitemselected ui-state-highlight'.

  • ui-igedit-listitemhover ui-state-hover

    Class applied to the Class applied to the SPAN element which represents item in dropdown list with mouse-over state. Default value is 'ui-igedit-listitemhover ui-state-hover'.

  • ui-igedit-listitemselected ui-state-highlight

    Class applied to the Class applied to the SPAN element which represents selected item in dropdown list. Default value is 'ui-igedit-listitemselected ui-state-highlight'.

  • ui-igedit-placeholder

    Class applied to the visible input in case of placeHolder option set. This class is related only to the placeHolder styling. Default value is 'ui-igedit-placeholder'.

  • ui-igedit-spinlowerimage ui-icon-carat-1-s ui-icon

    Class applied to the div holding the spin down button image. Default value is 'ui-igedit-spinlowerimage ui-icon-carat-1-s ui-icon ui-igedit-buttondefault ui-igedit-spinbutton ui-igedit-buttonimage'.

  • ui-igedit-spinupperimage ui-icon-carat-1-n ui-icon

    Class applied to the div holding the spin up button image. Default value is "ui-igedit-spinupperimage ui-icon-carat-1-n ui-icon ui-igedit-buttondefault ui-igedit-spinbutton ui-igedit-buttonimage'.

  • ui-igedit-textarea

    Class applied to the visible textarea element in case of textMode set to 'multiline'.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.