ui.igDatePicker
The igDatePicker control extends the functionality of the igDateEditor control and requires the jQuery UI Datepicker script to be included in the page (jquery.ui.datepicker.js). For more details on the igDatePicker control’s API, refer to the igDateEditor and igEditor control’s API documentation. For more information on customizing the jQuery UI Datepicker, see the jQuery UI online documentation. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.
The following code snippet demonstrates how to initialize the igDatePicker 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 igDatePicker control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.Code Sample
<!doctype html> <html> <head> <title>Ignite UI igDatePicker</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 () { $("#datePicker").igDatePicker({ width: 280, dateInputFormat: "dateTime", regional: "en-US", placeHolder: "Pick Date", datepickerOptions: { showWeek: true } }); }); </script> </head> <body> <input id="datePicker" /> </body> </html>
Related Samples
Related Topics
Dependencies
Inherits
-
allowNullValue
Inherited- Type:
- bool
- Default:
- false
Sets/Gets ability to prevent null value.
If that option is false, and editor has no value, then value is set to an empty string.Code Sample
//Initialize $(".selector").igDatePicker({ allowNullValue: true }); //Get var allowNullValue = $(".selector").igDatePicker("option", "allowNullValue"); //Set $(".selector").igDatePicker("option", "allowNullValue", true);
-
buttonType
- Type:
- enumeration
- Default:
- dropdown
Gets visibility of spin, clear and drop-down button. That option can be set only on initialization. Combinations like 'dropdown,clear' or 'dropdownclear' are supported too.
Members
- dropdown
- Type:string
- button to open list is located on the right side of input-field (or left side if base html element has direction:rtl);.
- clear
- Type:string
- button to clear value is located on the right side of input-field (or left side if base html element has direction:rtl);.
- spin
- Type:string
- spin buttons are located on the right side of input-field (or left side if base html element has direction:rtl).
Code Sample
//Initialize $(".selector").igDatePicker({ buttonType : "clear" }); //Get var buttonType = $(".selector").igDatePicker("option", "buttonType"); //Set $(".selector").igDatePicker("option", "buttonType", "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").igDatePicker({ centuryThreshold: 35 }); //Get var centuryThreshold = $(".selector").igDatePicker("option", "centuryThreshold"); //Set $(".selector").igDatePicker("option", "centuryThreshold", 35);
-
dataMode
Inherited- Type:
- enumeration
- Default:
- date
Gets type of value returned by the get of value() method. That also affects functionality of the set value(val) method and the copy/paste operations of browser. Note: that is used as default.
Members
- date
- Type:string
- The Date object is used. When that mode is set the value send to the server on submit is string value converter from the javascript Date object using "toISOString" method.
- displayModeText
- Type:string
- The String object is used and the "text" in display mode (no focus) format (pattern).
- editModeText
- Type:string
- The String object is used and the "text" in edit mode (focus) format (pattern).
Code Sample
//Initialize $(".selector").igDatePicker({ dataMode: "editModeText" }); //Get var dataMode = $(".selector").igDatePicker("option", "dataMode"); //Set $(".selector").igDatePicker("option", "dataMode", "displayModeText");
-
dateDisplayFormat
Inherited- Type:
- string
- Default:
- null
Gets/Sets format of date while editor has no focus.
Value of that option can be set to a specific date pattern or to a flag defined by regional settings.
If value is not set, then the dateInputFormat is used automatically.
If value is set to explicit date pattern and pattern besides date-flags has explicit characters which match with date-flags or mask-flags, then the "escape" character should be used in front of them.
List of predefined regional flags:
"date": the datePattern member of regional option is used
"dateLong": the dateLongPattern member of regional option is used
"time": the timePattern member of regional option is used
"timeLong": the timeLongPattern member of regional option is used
"dateTime": the dateTimePattern 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 date-flags when explicit date pattern is used:
"y": year field without century and without leading zero
"yy": year field without century and with leading zero
"yyyy": year field with leading zeros
"M": month field as digit without leading zero
"MM": month field as digit with leading zero
"MMM": month field as short month name
"MMMM": month field as long month name
"d": day of month field without leading zero
"dd": day of month field with leading zero
"ddd": day of the week as short name
"dddd": day of the week as long name
"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
"s": seconds field without leading zero
"ss": seconds field with leading zero
"f": milliseconds field in hundreds
"ff": milliseconds field in tenths
"fff": milliseconds field.Code Sample
//Initialize $(".selector").igDatePicker({ dateDisplayFormat: "dateLong" }); //Get var dateDisplayFormat = $(".selector").igDatePicker("option", "dateDisplayFormat"); //Set $(".selector").igDatePicker("option", "dateDisplayFormat", "dateLong");
-
dateInputFormat
Inherited- Type:
- string
- Default:
- null
Gets format of date while editor has focus.
Value of that option can be set to explicit date pattern or to a flag defined by regional settings.
If value is set to explicit date pattern and pattern besides date-flags has explicit characters which match with date-flags or mask-flags, then the "escape" character should be used in front of them.
If option is not set, then the "date" is used automatically.
List of predefined regional flags:
"date": the datePattern member of regional option is used
"dateLong": the dateLongPattern member of regional option is used
"time": the timePattern member of regional option is used
"timeLong": the timeLongPattern member of regional option is used
"dateTime": the dateTimePattern 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 date-flags when explicit date pattern is used:
"y": year field without century and without leading zero
"yy": year field without century and with leading zero
"yyyy": year field with leading zeros
"M": month field as digit without leading zero
"MM": month field as digit with leading zero
"MMM": month field as short month name. Note: in focused state the MM is used.
"MMMM": month field as long month name. Note: in focused state the MM is used.
"d": day of month field without leading zero
"dd": day of month field with leading zero
"ddd": day of the week as short name. Note: in focused state that field is skipped.
"dddd": day of the week as long name. Note: in focused state that field is skipped.
"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
"s": seconds field without leading zero
"ss": seconds field with leading zero
"f": milliseconds field in hundreds
"ff": milliseconds field in tenths
"fff": milliseconds field
Note! This option can not be set runtime.Code Sample
//Initialize $(".selector").igDatePicker({ dateInputFormat : "dateLong" }); //Get var dateInputFormat = $(".selector").igDatePicker("option", "dateInputFormat"); //Set $(".selector").igDatePicker("option", "dateInputFormat", "dateLong");
-
datepickerOptions
- Type:
- object
- Default:
- null
Gets/Sets options supported by the jquery.ui.datepicker. Only options related to drop-down calendar are supported.
Code Sample
//Initialize $(".selector").igDatePicker({ datepickerOptions: {minDate : new Date(2015, 9, 17), maxDate : new Date(2015, 9, 30) } }); //Get var datepickerOptions = $(".selector").igDatePicker("option", "datepickerOptions");
-
disabled
Inherited- Type:
- bool
- Default:
- false
Gets/Sets the disabled attribute.Does not allow editing. Disables all the buttons and iteracitons applied. On submit the current value is not sent into the request.
Code Sample
//Initialize $(".selector").igDatePicker({ disabled : true }); //Get var disabled = $(".selector").igDatePicker("option", "disabled"); //Set $(".selector").igDatePicker("option", "disabled", true);
-
enableUTCDates
Inherited- Type:
- bool
- Default:
- false
Gets/Sets formatting of the dates as UTC.
That option is supported only when dataMode option is 'date' and Date objects are used to get/set value of editor.
Notes:
That option affects only functionality of get/set value method and the Date-value, which was set on initialization.
When application uses the set-value, then internal Date-value and displayed-text is incremented by TimezoneOffset.
When application uses the get-value, then editor returns internal Date-value decremented by TimezoneOffset.
When that option is modified after initialization, then displayed text and internal Date-value are not affected.
It is not recommended to change that option without resetting Date-value.Code Sample
//Initialize $(".selector").igDatePicker({ enableUTCDates : true }); //Get var enableUTCDates = $(".selector").igDatePicker("option", "enableUTCDates"); //Set $(".selector").igDatePicker("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").igDatePicker({ excludeKeys : "2, 4" }); //Get var excludeKeys = $(".selector").igDatePicker("option", "excludeKeys"); //Set $(".selector").igDatePicker("option", "excludeKeys", "2, 4");
-
height
Inherited- Type:
- enumeration
- Default:
- null
Gets/Sets how the height of the control can be set.
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").igDatePicker({ height : 25 }); //Get var height = $(".selector").igDatePicker("option", "height"); //Set $(".selector").igDatePicker("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").igDatePicker({ includeKeys : "1, 3, 5, 7, 9" }); //Get var includeKeys = $(".selector").igDatePicker("option", "includeKeys"); //Set $(".selector").igDatePicker("option", "includeKeys", "1, 3, 5, 7, 9");
-
inputName
Inherited- Type:
- string
- Default:
- null
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").igDatePicker({ inputName : "textField" }); //Get var inputName = $(".selector").igDatePicker("option", "inputName"); //Set $(".selector").igDatePicker("option", "inputName", "textField");
-
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. -
locale
Inherited- Type:
- object
- Default:
- null
Gets/Sets strings used for title of buttons. Value of object should contain pairs or key:value members. Note: any sub-option of locale can appear within the main option of igEditor. In this case those values within main options will have highest priority and override corresponding value in locale.
Code Sample
//Initialize $(".selector").igDatePicker({ locale : "th" }); //Get var locale = $(".selector").igDatePicker("option", "locale"); //Set $(".selector").igDatePicker("option", "locale", "th");
-
maxLength
Inherited- Type:
- number
- Default:
- null
Gets/Sets maximum length of text which can be entered by user.
Negative values or 0 disables that behavior. -
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. For example Date(/"thicks"/).
Note! This option doesn't use the displayInputFormat to extract the date.
Note! This option can not be set runtime.Code Sample
//Initialize $(".selector").igDatePicker({ maxValue: new Date(2020, 11, 21) }); //Get var maxValue = $(".selector").igDatePicker("option", "maxValue");
-
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. For example Date(/"thicks"/).
Note! This option doesn't use the displayInputFormat to extract the date.
Note! This option can not be set runtime.Code Sample
//Initialize $(".selector").igDatePicker({ minValue: new Date(1980, 6, 1) }); //Get var minValue = $(".selector").igDatePicker("option", "minValue");
-
nullValue
Inherited- Type:
- enumeration
- Default:
- null
Sets/Gets 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.
-
placeHolder
Inherited- Type:
- string
- Default:
- null
Gets/Sets text which appears in editor when editor has no focus and "value" in editor is null or empty string.
Code Sample
//Initialize $(".selector").igDatePicker({ placeHolder: "Enter date" }); //Get var placeHolder = $(".selector").igDatePicker("option", "placeHolder"); //Set $(".selector").igDatePicker("option", "placeHolder", "Enter date");
-
preventSubmitOnEnter
Inherited- Type:
- bool
- Default:
- false
Sets the ability of the editor to prevent form submition on enter key pressed.
Code Sample
//Initialize $(".selector").igDatePicker({ preventSubmitOnEnter: true }); //Get var preventSubmitOnEnter = $(".selector").igDatePicker("option", "preventSubmitOnEnter"); //Set $(".selector").igDatePicker("option", "preventSubmitOnEnter", true);
-
readOnly
Inherited- Type:
- bool
- Default:
- false
Gets/Sets the readonly attribute.Does not allow editing. Disables all the buttons and iteracitons applied. On submit the current value is sent into the request.
Code Sample
`//Initialize $(".selector").igDatePicker({ readOnly : true }); //Get var readOnly = $(".selector").igDatePicker("option", "readOnly"); //Set $(".selector").igDatePicker("option", "readOnly", true);
-
regional
- Type:
- object
- Default:
- null
Gets/Sets custom regional settings for editor. If it is string, then $.ig.regional[stringValue] is assumed.
Code Sample
//Initialize $(".selector").igDatePicker({ regional: "en-US" }); //Get var regional = $(".selector").igDatePicker("option", "regional"); //Set $(".selector").igDatePicker("option", "regional", "en-US");
-
revertIfNotValid
Inherited- Type:
- bool
- Default:
- true
Sets the editor to revert value to previous value in case of not valid value on blur, or enter key. If set to false clear is called.
Code Sample
//Initialize $(".selector").igDatePicker({ revertIfNotValid : false }); //Get var revertIfNotValid = $(".selector").igDatePicker("option", "revertIfNotValid"); //Set $(".selector").igDatePicker("option", "revertIfNotValid", false);
-
selectionOnFocus
Inherited- Type:
- enumeration
- Default:
- selectAll
Set 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 enetered.
- atStart
- Type:string
- Setting this option will move the cursor at the begining the text into the editor when the edit mode gets enetered.
- atEnd
- Type:string
- Setting this option will move the cursor at the end the text into the editor when the edit mode gets enetered.
- browserDefault
- Type:string
- Setting this option won't do any extra logic, but proceed with browser default behavior.
Code Sample
//Initialize $(".selector").igDatePicker({ selectionOnFocus: "atStart" }); //Get var selectionOnFocus= $(".selector").igDatePicker("option", "selectionOnFocus"); //Set $(".selector").igDatePicker("option", "selectionOnFocus", "atStart");
-
spinDelta
Inherited- Type:
- number
- Default:
- 1
Gets/Sets delta-value which is used to increment or decrement value in editor on spin events. If value is set to negative value an exception is thrown. Non integer value is supported only for dataMode double and float.
-
spinWrapAround
Inherited- Type:
- bool
- Default:
- false
Gets/Sets ability to automatically change the hoverd item into the opened dropdown list to its oposide side. When last item is reached and the spin down is clicked the first item gets hovered and vice versa.
-
suppressNotifications
Inherited- Type:
- bool
- Default:
- false
Disables 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").igDatePicker({ suppressNotifications : true }); //Get var suppressNotifications = $(".selector").igDatePicker("option", "suppressNotifications"); //Set $(".selector").igDatePicker("option", "suppressNotifications", true);
-
tabIndex
Inherited- Type:
- number
- Default:
- null
Gets/Sets value in tabIndex for editor.
Code Sample
//Initialize $(".selector").igDatePicker({ tabIndex : 3 }); //Get var tabIndex = $(".selector").igDatePicker("option", "tabIndex"); //Set $(".selector").igDatePicker("option", "tabIndex", 3);
-
textAlign
Inherited- Type:
- enumeration
- Default:
- left
Gets/Sets horizontal alignment of text in editor. If that option is not set, then 'right' is used for 'numeric', 'currency' and 'percent' editors and the 'left' is used for all other types of editor.
Members
- left
- Type:string
- right
- Type:string
- center
- Type:string
Code Sample
//Initialize $(".selector").igDatePicker({ textAlign : "center" }); //Get var textAlign = $(".selector").igDatePicker("option", "textAlign"); //Set $(".selector").igDatePicker("option", "textAlign", "center");
-
validatorOptions
Inherited- Type:
- object
- Default:
- null
Sets/Gets options supported by the igValidator widget.
Note: Validation rules of igValidator, such as min and max value/length are applied separately triggering errors,
while similar options of the editor work to prevent wrong values from being entered.Code Sample
/Initialize $(".selector").igDatePicker({ validatorOptions : { onblur: true, errorMessage: "Error!" } }); //Get var validatorOptions = $(".selector").igDatePicker("option", "validatorOptions"); //Set $(".selector").igDatePicker("option", "validatorOptions", {onblur: true, errorMessage: "Error!"});
-
value
Inherited- Type:
- date
- Default:
- null
Gets/Sets value in editor. 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 as value. MVC date format can be used too. For example Date(/"thicks"/).
Note! This option doesn't use the displayInputFormat to extract the date.Code Sample
//Initialize $(".selector").igDatePicker({ value : new Date (2015, 11, 11) }); //Get var value = $(".selector").igDatePicker("option", "value"); //Set $(".selector").igDatePicker("option", "value", new Date (2015, 11, 11));
-
width
Inherited- Type:
- enumeration
- Default:
- null
Gets/Sets how the width of the control can be set.
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").igDatePicker({ width : 200 }); //Get var width = $(".selector").igDatePicker("option", "width"); //Set $(".selector").igDatePicker("option", "width", 200);
-
yearShift
Inherited- Type:
- number
- Default:
- 0
Gets/Sets difference between year in Gregorian calendar and displayed year.
Code Sample
//Initialize $(".selector").igDatePicker({ yearShift : 4500 }); //Get var yearShift = $(".selector").igDatePicker("option", "yearShift"); //Set $(".selector").igDatePicker("option", "yearShift", 4500);
For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.
-
blur
Inherited- Cancellable:
- false
Event which is raised when input field of editor loses focus.
Function takes argument evt.
Use ui.owner to obtain reference to igEditor.
Use evt.originalEvent to obtain reference to event of browser.Code Sample
// Bind $(document).delegate(".selector", "igdatepickerblur", function (evt) { //return browser event evt.originalEvent; }); //Initialize $(".selector").igDatePicker({ blur: function (evt) { ... } });
-
dropDownListClosed
- Cancellable:
- false
Event which is raised when the drop down (calendar) is already closed.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.calendar to obtain a reference to jQuery UI date picker widget, used as a calendar from the igDatePicker. -
dropDownListOpened
- Cancellable:
- false
Event which is raised when the drop down is already opened.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.calendar to obtain a reference to jQuery UI date picker widget, used as a calendar from the igDatePicker. -
dropDownListOpening
- Cancellable:
- true
Event which is raised when the drop down is opening.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.calendar to obtain a reference to jQuery UI date picker widget, used as a calendar from the igDatePicker. -
focus
Inherited- Cancellable:
- false
Event which is raised when input field of editor gets focus.
Function takes argument evt.
Use ui.owner to obtain reference to igEditor.
Use evt.originalEvent to obtain reference to event of browser.Code Sample
// Bind $(document).delegate(".selector", "igdatepickerfocus", function (evt) { //return browser event evt.originalEvent; }); //Initialize $(".selector").igDatePicker({ focus: function (evt) { ... } });
-
itemSelected
- Cancellable:
- false
Event which is raised after the date selection in the calendar.
Function takes argument ui.
Use ui.owner to obtain reference to igEditor.
Use ui.dateFromPicker to obtain reference to the date object which is selected.
Use ui.item to obtain a referece to the selected html element from the calendar.
Use ui.calendar to obtain a reference to jQuery UI date picker, used as a calendar from the igDatePicker. -
keydown
Inherited- Cancellable:
- true
Event which is raised on keydown event.
Return false in order to cancel key action.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.Code Sample
// Bind $(document).delegate(".selector", "igdatepickerkeydown", function (evt, ui) { //return browser event evt.originalEvent; //use to obtain value of keyCode ui.key; }); //Initialize $(".selector").igDatePicker({ keydown: function (evt, ui) { ... } });
-
keypress
Inherited- Cancellable:
- true
Event which is raised on keypress event.
Return false in order to cancel key action.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.
Set ui.key to another character which will replace original entry.Code Sample
// Bind $(document).delegate(".selector", "igdatepickerkeypress", function (evt, ui) { //return browser event evt.originalEvent; //use to obtain value of keyCode ui.key; //set the ui.key to "1" - a cahracter which will replace the original entry ui.key = 49 }); //Initialize $(".selector").igDatePicker({ keypress: function (evt, ui) { ... } });
-
keyup
Inherited- Cancellable:
- false
Event which is raised on keyup event.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.Code Sample
// Bind $(document).delegate(".selector", "igdatepickerkeyup", function (evt, ui) { //return browser event evt.originalEvent; //use to obtain value of keyCode ui.key; }); //Initialize $(".selector").igDatePicker({ keyup: function (evt, ui) { ... } });
-
mousedown
Inherited- Cancellable:
- false
Event which is raised on mousedown at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.Code Sample
// Bind $(document).delegate(".selector", "igdatepickermousedown", function (evt, ui) { //obtains type of html element under mouse, such as field, button, spinUpper or spinLower. ui.elementType; //obtains id of html element under mouse, such as field, button, spinUpper or spinLower. ui.id; }); //Initialize $(".selector").igDatePicker({ mousedown: function (evt, ui) { ... } });
-
mousemove
Inherited- Cancellable:
- false
Event which is raised on mousemove at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.Code Sample
// Bind $(document).delegate(".selector", "igdatepickermousemove", function (evt, ui) { //obtains type of html element under mouse, such as field, button, spinUpper or spinLower. ui.elementType; //obtains id of html element under mouse, such as field, button, spinUpper or spinLower. ui.id; }); //Initialize $(".selector").igDatePicker({ mousemove: function (evt, ui) { ... } });
-
mouseout
Inherited- Cancellable:
- false
Event which is raised on mouseleave at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.Code Sample
// Bind $(document).delegate(".selector", "igdatepickermouseout", function (evt, ui) { //return browser event evt.originalEvent; //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#. ui.elementType; //obtains id of html element under mouse, such as field, button, spinUpper, spinLower or item#. ui.id; }); //Initialize $(".selector").igDatePicker({ mouseout: function (evt, ui) { ... } });
-
mouseover
Inherited- Cancellable:
- false
Event which is raised on mouseover at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.Code Sample
// Bind $(document).delegate(".selector", "igdatepickermouseover", function (evt, ui) { //return browser event evt.originalEvent; //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#. ui.elementType; //obtains id of html element under mouse, such as field, button, spinUpper, spinLower or item#. ui.id; }); //Initialize $(".selector").igDatePicker({ mouseover: function (evt, ui) { ... } });
-
mouseup
Inherited- Cancellable:
- false
Event which is raised on mouseup at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.Code Sample
// Bind $(document).delegate(".selector", "igdatepickermouseup", function (evt, ui) { //obtains type of html element under mouse, such as field, button, spinUpper оr spinLower. ui.elementType; //obtains id of html element under mouse, such as field, button, spinUpper or spinLower. ui.id; }); //Initialize $(".selector").igDatePicker({ mouseup: function (evt, ui) { ... } });
-
rendered
Inherited- Cancellable:
- false
Event which is raised after rendering of the editor completes.
Function takes arguments evt and ui.
Use ui.owner to get a reference to the editor performing rendering.
Use ui.element to get a reference to the editor element.Code Sample
$(document).delegate(".selector", "igdatepickerrendered", function (evt, ui) { }); //Initialize $(".selector").igDatePicker({ rendered: function () { ... } });
-
rendering
Inherited- Cancellable:
- false
Event which is raised before rendering of the editor completes.
Function takes arguments evt and ui.
Use ui.owner to get a reference to the editor performing rendering.
Use ui.element to get a reference to the editor element.Code Sample
$(document).delegate(".selector", "igdatepickerrendering", function (evt, ui) { }); //Initialize $(".selector").igDatePicker({ rendering: function () { ... } });
-
textChanged
Inherited- Cancellable:
- false
Event which is raised after text in editor was changed. It can be raised when keyUp event occurs,
or when the clear button is clicked or when an item from a list is selected.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.text to obtain new text
Use ui.oldText to obtain the old text.Code Sample
// Bind $(document).delegate(".selector", "igdatepickertextchanged", function (evt, ui) { //gets the new value ui.value; //gets the old value ui.oldValue; }); //Initialize $(".selector").igDatePicker({ textChanged: function (evt, ui) { ... } });
-
valueChanged
Inherited- Cancellable:
- false
Event which is raised after value in editor was changed. It can be raised on lost focus or on spin events.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.newValue to obtain the new value.
Use ui.originalValue to obtain the original value.
Use ui.editorInput to obtain reference to the editor input.Code Sample
$(document).delegate(".selector", "igdatepickervaluechanged", function (evt, ui) { //Use to obtain reference to igEditor ui.owner; //Use to obtain new value ui.newValue; //Use to obtain the value coming from the native event arguments ui.originalValue; //Use to obtain reference to editor input ui.editorInput }); //Initialize $(".selector").igDatePicker({ valueChanged: function (evt, ui) { ... } });
-
valueChanging
Inherited- Cancellable:
- true
Event which is raised before value in editor was changed.
Return false in order to cancel change.
It can be raised on lost focus or on spin events.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.newValue to obtain the new value.
Use ui.oldValue to obtain the old value.
Use ui.editorInput to obtain reference to the editor input.Code Sample
$(document).delegate(".selector", "igdatepickervaluechanging", function (evt, ui) { //Use to obtain reference to igEditor ui.owner; //Use to obtain new value ui.newValue; //Use to obtain old value ui.oldValue; //Use to obtain reference to editor input ui.editorInput }); //Initialize $(".selector").igDatePicker({ valueChanging: function (evt, ui) { ... } });
-
clearButton
Inherited- .igDatePicker( "clearButton" );
- Return Type:
- jquery
- Return Type Description:
- Returns reference to jquery object.
Returns a reference to the clear button UI element of the editor.
Code Sample
$(".selector").igDatePicker("clearButton");
-
destroy
- .igDatePicker( "destroy" );
Destructor of the widget.
Code Sample
$(".selector").igDatePicker("destroy");
-
displayValue
Inherited- .igDatePicker( "displayValue" );
- Return Type:
- string
- Return Type Description:
- Visible text of the editor.
Gets visible text in the editor.
Code Sample
$(".selector").igDatePicker("displayValue");
-
dropDownButton
- .igDatePicker( "dropDownButton" );
- Return Type:
- jquery
- Return Type Description:
- Returns reference to jquery object.
Returns a reference to the calendar button UI element of the editor.
-
dropDownVisible
- .igDatePicker( "dropDownVisible" );
- Return Type:
- bool
- Return Type Description:
- The visibility state of the calendar.
Returns the visibility state of the calendar.
-
editorContainer
Inherited- .igDatePicker( "editorContainer" );
- Return Type:
- jquery
- Return Type Description:
- The container editor element.
Gets reference to jquery object which is used as top/outer element of igEditor.
Code Sample
$(".selector").igDatePicker("editorContainer");
-
field
Inherited- .igDatePicker( "field" );
- Return Type:
- jquery
- Return Type Description:
- The visual editor element.
Gets the visual editor element.
Code Sample
$(".selector").igDatePicker("field");
-
getCalendar
- .igDatePicker( "getCalendar" );
- Return Type:
- jquery
- Return Type Description:
- Returns reference to jquery object.
Returns a reference to the jQuery calendar used as a picker selector.
Code Sample
$(".selector").igDatePicker("getCalendar");
-
getSelectedDate
Inherited- .igDatePicker( "getSelectedDate" );
- Return Type:
- date
Gets selected date.
Code Sample
$(".selector").igDatePicker("getSelectedDate");
-
getSelectedText
Inherited- .igDatePicker( "getSelectedText" );
- Return Type:
- string
- Return Type Description:
- Selected text in editor.
Gets selected text in editor.
Code Sample
$(".selector").igDatePicker("getSelectedText");
-
getSelectionEnd
Inherited- .igDatePicker( "getSelectionEnd" );
- Return Type:
- number
- Return Type Description:
- End index of the selected text in editor.
Gets end index of the selected text in editor.
Code Sample
$(".selector").igDatePicker("getSelectionEnd");
-
getSelectionStart
Inherited- .igDatePicker( "getSelectionStart" );
- Return Type:
- number
- Return Type Description:
- Start index of the selected text in editor.
Gets start index of the selected text in editor.
Code Sample
$(".selector").igDatePicker("getSelectionStart");
-
hasFocus
Inherited- .igDatePicker( "hasFocus" );
- Return Type:
- bool
- Return Type Description:
- Returns if the editor is focused or not.
Checks if editor has focus.
Code Sample
$(".selector").igDatePicker("hasFocus");
-
hide
Inherited- .igDatePicker( "hide" );
Hides editor.
Code Sample
$(".selector").igDatePicker("hide");
-
hideDropDown
- .igDatePicker( "hideDropDown" );
Hides the drop down list.
-
inputName
Inherited- .igDatePicker( "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").igDatePicker("inputName");
-
insert
Inherited- .igDatePicker( "insert", string:string );
Paste text at location of caret. Note: method raises the "valueChanged" event.
- string
- Type:string
- The string to be inserted.
Code Sample
$(".selector").igDatePicker("insert", "20");
-
isValid
Inherited- .igDatePicker( "isValid" );
- Return Type:
- bool
- Return Type Description:
- Whether editor value is valid or not.
Checks if value in editor is valid. Note: This function will not trigger automatic notifications.
Code Sample
$(".selector").igDatePicker("isValid");
-
select
Inherited- .igDatePicker( "select", start:number, end:number );
Selects text in editor. If parameters are equal, then than method sets location of caret. That method has effect only when editor has focus.
- start
- Type:number
- Start of the selection.
- end
- Type:number
- End of the selection.
Code Sample
$(".selector").igDatePicker("select", 2, 4);
-
selectDate
Inherited- .igDatePicker( "selectDate", date:date );
Sets selected date.
- date
- Type:date
- .
Code Sample
$(".selector").igDatePicker("selectDate", new Date (2016, 2, 3));
-
setFocus
Inherited- .igDatePicker( "setFocus", [delay:number] );
Set focus to editor with delay.
- delay
- Type:number
- Optional
- The delay before focusing the editor.
Code Sample
$(".selector").igDatePicker("setFocus", 350);
-
show
Inherited- .igDatePicker( "show" );
Shows editor.
Code Sample
$(".selector").igDatePicker("show");
-
showDropDown
- .igDatePicker( "showDropDown" );
Shows the drop down list.
-
spinDown
Inherited- .igDatePicker( "spinDown", [delta:number] );
Decrease date-time period, depending on the cursor position.
- delta
- Type:number
- Optional
- The decrease delta.
Code Sample
$(".selector").igDatePicker("spinDown", 2);
-
spinDownButton
Inherited- .igDatePicker( "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.
-
spinUp
Inherited- .igDatePicker( "spinUp", [delta:number] );
Increase date-time period, depending on the cursor position.
- delta
- Type:number
- Optional
- The increase delta.
Code Sample
$(".selector").igDatePicker("spinUp", 5);
-
spinUpButton
Inherited- .igDatePicker( "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.
-
validate
Inherited- .igDatePicker( "validate" );
- Return Type:
- bool
- Return Type Description:
- Whether editor value is valid or not.
Triggers validation of editor and show potential warning message. If validatorOptions are set will also call validate on the igValidator.
Code Sample
$(".selector").igDatePicker("validate");
-
validator
Inherited- .igDatePicker( "validator" );
- Return Type:
- object
- Return Type Description:
- Returns reference to igValidator or null.
Gets reference to igValidator used by the editor.
Code Sample
$(".selector").igDatePicker("validator");
-
value
Inherited- .igDatePicker( "value", [newValue:date] );
- Return Type:
- date
- Return Type Description:
- Current editor value.
Gets/Sets editor value.
Note! This option doesn't use the displayInputFormat to extract the date.- newValue
- Type:date
- Optional
- New editor value. 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. For example Date(/"thicks"/).
Code Sample
$(".selector").igDatePicker("value", new Date (2016, 2, 3);
-
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 plaseHolder 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'.