Ignite UI API Reference

Sets gets duration of animation in milliseconds when drop-down list is hidden. That option is not supported when "type" is set to "datepicker", because the jquery.ui.datepicker does not have similar feature. Default is 200. If value is less than 5, then animation is disabled.

      //Initialize
      $(".selector").igDateEditor({
          animationHideDuration: 500
      });
 
      //Get
      var animationHideDuration = $(".selector").igDateEditor("option", "animationHideDuration");
 
      //Set
      $(".selector").igDateEditor("option", "animationHideDuration", 500);
      

Sets gets duration of animation in milliseconds when drop-down list or calendar is displayed. Default is 200. If value is less than 5, then animation is disabled.

      //Initialize
      $(".selector").igDateEditor({
        animationShowDuration: 500
      });
 
      //Get
      var animationShowDuration = $(".selector").igDateEditor("option", "animationShowDuration");
 
      //Set
      $(".selector").igDateEditor("option", "animationShowDuration", 500);
      

Sets gets visibility of spin and drop-down button. That option can be set only on initialization. Combinations like 'dropdown,spin' or 'spinclear' are supported too.

        //Initialize
        $(".selector").igDateEditor({
            button : "dropdown"
        });

        //Get
        var button = $(".selector").igDateEditor("option", "button");

        //Set
        $(".selector").igDateEditor("option", "button", "spin");
      

Sets gets 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.

      //Initialize
      $(".selector").igDateEditor({
          centuryThreshold: 35
      });
        
      //Get
      var centuryThreshold = $(".selector").igDateEditor("option", "centuryThreshold");
        
      //Set
      $(".selector").igDateEditor("option", "centuryThreshold", 35);
      

Sets 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.

      //Initialize
      $(".selector").igDateEditor({
          dataMode: "text"
      });
        
      //Get
      var dataMode = $(".selector").igDateEditor("option", "dataMode");
        
      //Set
      $(".selector").igDateEditor("option", "dataMode", "text");
      

Sets gets 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 thousands
"ff": milliseconds field in hundreds
"fff": milliseconds field.

      //Initialize
      $(".selector").igDateEditor({
          dateDisplayFormat: "dateLong"
      });
        
      //Get
      var dateDisplayFormat = $(".selector").igDateEditor("option", "dateDisplayFormat");
        
      //Set
      $(".selector").igDateEditor("option", "dateDisplayFormat", "dateLong");
	  

Sets 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 thousands
"ff": milliseconds field in hundreds
"fff": milliseconds field.

  
      //Initialize
      $(".selector").igDateEditor({
          dateInputFormat : "dateLong"
      });
        
      //Get
      var format = $(".selector").igDateEditor("option", "dateInputFormat");
        
      //Set
      $(".selector").igDateEditor("option", "dateInputFormat", "dateLong");
      

Sets gets style.display for outer html element.
The value of "" will disable changing style.display.
If the base html element is not INPUT, TEXTAREA, SPAN or DIV, then it is recommended to set this option to an empty string,
because, some browsers may fail to handle display other than default value of browser.
For example, if base element for editor is TD, then behavior in Chrome can be problematic.

        //Initialize
        $(".selector").igDateEditor({
            display : "block"
        });

        //Get
        var display = $(".selector").igDateEditor("option", "display");

        //Set
        $(".selector").igDateEditor("option", "display", "block");
      

Sets gets ability to override the "readOnly" option and allow showing the drop-down list and changing the value in the editor from a list. Value false does not allow drop-down when "readOnly" is true.

        //Initialize
        $(".selector").igDateEditor({
            dropDownOnReadOnly : true
        });

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

        //Set
        $(".selector").igDateEditor("option", "dropDownOnReadOnly", true);      
      

Sets gets list of actions which trigger display of drop-down list or calendar. The list should include flags separated by the "," character. Flags may include optional "ctrl+", "shift+" or "alt+" prefix. If prefix is defined, then action is triggered for combination of flag-action with Ctrl, Shift or Alt key.

  
        //Initialize
        $(".selector").igDateEditor({
            dropDownTriggers : "button,0,1,2,3,4,5,6,7,8,9"
        });

        //Get
        var triggers = $(".selector").igDateEditor("option", "dropDownTriggers");

        //Set
        $(".selector").igDateEditor("option", "dropDownTriggers", "button,0,1,2,3,4,5,6,7,8,9");      
      

Sets gets 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.

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

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

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

If that option is disabled and the editor is not focused, then a mouse click on the spin button will keep the text in the editor in display (not focus) format and perform spin actions.

        //Initialize
        $(".selector").igDateEditor({
            focusOnSpin : true
        });

        //Get
        var spinFocus = $(".selector").igDateEditor("option", "focusOnSpin");

        //Set
        $(".selector").igDateEditor("option", "focusOnSpin", true);
	  

Sets gets height of editor in pixels.
Only positive values have effect.
If that option is not set, then value of style.height of base html element will be used automatically. However, that value should be in the px units.

        //Initialize
        $(".selector").igDateEditor({
            height : 25
        });

        //Get
        var height = $(".selector").igDateEditor("option", "height");

        //Set
        $(".selector").igDateEditor("option", "height", 25);
	  

Sets gets ability to hide the Enter key from browser.

        //Initialize
        $(".selector").igDateEditor({
            hideEnterKey : false
        });

        //Get
        var hideKey = $(".selector").igDateEditor("option", "hideEnterKey");

        //Set
        $(".selector").igDateEditor("option", "hideEnterKey", false);
	  

Sets gets ability to hide mask in focus state.
Value of true allows showing or hiding all input mask with prompt characters regardless if available mask positions are filled or not.
Value of true will show only part of mask located on the left side from caret when available mask positions on the right side from caret are empty.

        //Initialize
        $(".selector").igDateEditor({
            hideMaskOnFocus : true
        });

        //Get
        var hideMaskOnFocus = $(".selector").igDateEditor("option", "hideMaskOnFocus");

        //Set
        $(".selector").igDateEditor("option", "hideMaskOnFocus", true);
	  

Gets sets name of (hidden) INPUT element, which value will be set to current value of editor on any change.

      //Initialize 
      $(".selector").igDateEditor({     
          inputName : "textField"
      });  
 
      //Get 
      var inputName = $(".selector").igDateEditor("option", "inputName");  
 
      //Set 
      $(".selector").igDateEditor("option", "inputName", "textField");
      

Sets gets number of columns in drop-down list.

        //Initialize
        $(".selector").igDateEditor({
            listColumns : 2
        });

        //Get
        var listCols = $(".selector").igDateEditor("option", "listColumns");

        //Set
        $(".selector").igDateEditor("option", "listColumns", 2);
	  

Sets gets location of drop-down list.
Value true will create html element for list as a child of main html element.
Value false creates list as a child of body.
Notes:
That option has effect only for drop-down defined by listItems.
The value of true is supported only when main (outer) html element of editor is container such as SPAN or DIV, or buttons are enabled, or renderInContainer is enabled, the theme is set.
The value of true allows a better positioning and can be useful when editor is located in complex layout and containers with "position:fixed".

        //Initialize
        $(".selector").igDateEditor({
            listDropDownAsChild : true
        });

        //Get
        var listChild = $(".selector").igDateEditor("option", "listDropDownAsChild");

        //Set
        $(".selector").igDateEditor("option", "listDropDownAsChild", true);
	

Sets gets list of items which are used for drop-down list, spin, validation and auto-complete functionality.
Items in list can be strings, numbers, dates or objects in any combination.
If type of editor is date or datepicker and item is string, then igEditor will try to convert it to Date object and show item in display format.
If type of editor is numeric, currency or percent and item is string, then igEditor will try to convert it to number and show item in display format.
If item is object and it has member "text", then that member is used.
If item is object and besides "text" has function getHtml(), then that function is used to render item in list.
The item or item.text is used to set "value" of particular editor when list-item is selected.

        //Initialize
        $(".selector").igDateEditor({
            listItems : [
                new Date("10/10/2010"),
                new Date("11/11/2011"),
                new Date()
            ]
        });

        //Get
        var items = $(".selector").igDateEditor("option", "listItems");

        //Set
        $(".selector").igDateEditor("option", "listItems", [ new Date("10/10/2010"), new Date("11/11/2011"), new Date() ]);
	  

Sets gets maximum height of drop-down list in pixels. If value is equal to 0 or negative, then the height of list is defined by number of items in list.

        //Initialize
        $(".selector").igDateEditor({
            listMaxHeight : 400
        });

        //Get
        var listMaxHeight = $(".selector").igDateEditor("option", "listMaxHeight");

        //Set
        $(".selector").igDateEditor("option", "listMaxHeight", 400);
	  

Sets gets custom width of drop-down list in pixels. If value is equal to 0 or negative, then the width of editor is used.

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

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

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

Sets gets 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.

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

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

        //Set
        $(".selector").igDateEditor("option", "locale", "th");
	  

Sets gets the maximum value which can be entered in editor by user.

      //Initialize
      $(".selector").igDateEditor({
          maxValue: new Date(2112, 11, 21)
      });
        
      //Get
      var maxValue = $(".selector").igDateEditor("option", "maxValue");
        
      //Set
      $(".selector").igDateEditor("option", "maxValue", new Date(2112, 11, 21));
	  

Sets gets the minimum number of date fields, which makes entered date-string valid.
All missing fields are automatically filled up from the previous valid date or with zeros or with the values from the today date.
For example, if "dateInputPattern" is set to "yyyy/MM/dd hh:mm" and user entered only the first 3 fields (year, month, day), then values for hours and minutes are filled with zeros.

      //Initialize
      $(".selector").igDateEditor({
          minNumberOfDateFields: 5
      });
        
      //Get
      var minNumberOfDateFields = $(".selector").igDateEditor("option", "minNumberOfDateFields");
        
      //Set
      $(".selector").igDateEditor("option", "minNumberOfDateFields", 5);
	  

Sets gets the minimum value which can be entered in editor by user.

	    //Initialize
      $(".selector").igDateEditor({
          minValue: new Date(1980, 6, 1)
      });
        
      //Get
      var minValue = $(".selector").igDateEditor("option", "minValue");
        
      //Set
      $(".selector").igDateEditor("option", "minValue", new Date(1980, 6, 1));
	  

Sets gets ability to prevent null value.
If that option is disabled, and editor has no value, then value is set to today date (or minValue/maxValue).

        //Initialize
        $(".selector").igDateEditor({
            nullable : false
        });

        //Get
        var nullable = $(".selector").igDateEditor("option", "nullable");

        //Set
        $(".selector").igDateEditor("option", "nullable", false);
	  

Sets gets text which appears in editor when editor has no focus and "value" in editor is null or empty string.

        //Initialize
        $(".selector").igDateEditor({
            nullText : "Enter Value"
        });

        //Get
        var nullText = $(".selector").igDateEditor("option", "nullText");

        //Set
        $(".selector").igDateEditor("option", "nullText", "Enter Value");
	  

Sets gets character which is used as prompt in edit mode for available entry position. Default is "_".

 
        //Initialize
        $(".selector").igDateEditor({
            promptChar : "*"
        });
        
        //Get
        var prompt = $(".selector").igDateEditor("option", "promptChar");
        
        //Set
        $(".selector").igDateEditor("option", "promptChar", "*");
        

Set gets ability to modify editor from keyboard (false) or disables keyboard (true).
Notes:
If the "spinOnReadOnly" is enabled, then value will be modified on spin regardless of the "readOnly".
If the "listItems" has items and "dropDownTriggers" is defined, then value will be modified from drop-down list regardless of the "readOnly".

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

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

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

Sets gets ability to decrease day of month.
Value of true allows decreasing day of month, when editor loses focus and user entered day of month which is larger the maximum for that particular month.
Value of false will automatically increment month and decrease day of month.
Examples.
If that option is true and user entered "09/31/2010", then on lost focus that string will be converted to "09/30/2010".
If that option is false, then in similar situation the string will be converted to "10/01/2010".

      //Initialize
      $(".selector").igDateEditor({
          reduceDayOfInvalidDate : false
      });
      
      //Get
      var reduceDayOfInvalidDate = $(".selector").igDateEditor("option", "reduceDayOfInvalidDate");
        
      //Set
      $(".selector").igDateEditor("option", "reduceDayOfInvalidDate", false);
	  

Sets gets custom regional settings for editor. If it is string, then $.ig.regional[stringValue] is assumed.

        //Initialize
        $(".selector").igDateEditor({
            regional: "en-US"
        });
        
        //Get
        var regional = $(".selector").igDateEditor("option", "regional");
        
        //Set
        $(".selector").igDateEditor("option", "regional", "en-US");
	  

Sets gets option to wrap input field into SPAN..
That option can be set only on initialization and it is available only when base element is INPUT or TEXTAREA.
If drop-down button or spin-buttons are enabled or the theme is set, then that option has no effect.
The reason for that property is to allow vertical alignment of several igEditor controls when they are located in html inline and some of them have enabled buttons.
If all editors are created within SPAN wrapper, then they will appear on the same line. Otherwise, editors in SPANs will be shifted 3-6 pixels above INPUT editors.

        //Initialize
        $(".selector").igDateEditor({
            renderInContainer : true
        });

        //Get
        var renderInContainer = $(".selector").igDateEditor("option", "renderInContainer");

        //Set
        $(".selector").igDateEditor("option", "renderInContainer", true);
	  

Set gets validation for empty value in editor.

        //Initialize
        $(".selector").igDateEditor({
            required : true
        });

        //Get
        var required = $(".selector").igDateEditor("option", "required");

        //Set
        $(".selector").igDateEditor("option", "required", true);
	  

Sets gets behavior of selection/caret in input-field when editor gets focus.

      //Initialize
      $(".selector").igDateEditor({
          selectionOnFocus: 0
      });
 
      //Get
      var selectionOnFocus= $(".selector").igDateEditor("option", "selectionOnFocus");
 
      //Set
      $(".selector").igDateEditor("option", "selectionOnFocus", 0);
	  

Sets gets 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.

      //Initialize
      $(".selector").igDateEditor({
          spin1Field : true
      });
      
      //Get
      var spin1Field = $(".selector").igDateEditor("option", "spin1Field");
        
      //Set
      $(".selector").igDateEditor("option", "spin1Field", true);
	  

Sets gets delta-value which is used to increment or decrement the value of field where caret is located is modified.

      //Initialize
      $(".selector").igDateEditor({
          spinDelta: 10
      });
 
      //Get
      var spinDelta= $(".selector").igDateEditor("option", "spinDelta");
 
      //Set
      $(".selector").igDateEditor("option", "spinDelta", 10);
	  

Sets gets ability to override the "readOnly" option and allow changes "value" of editor on spin events. Value false does not allow spin when "readOnly" is true.

        //Initialize
        $(".selector").igDateEditor({
            spinOnReadOnly : true
        });

        //Get
        var spinOnReadOnly = $(".selector").igDateEditor("option", "spinOnReadOnly");

        //Set
        $(".selector").igDateEditor("option", "spinOnReadOnly", true);     
	  

Sets gets ability to automatically set value in editor to opposite limit, when spin action reached minimum or maximum limit.
In case of listItems, the first and the last items in list are used as minimum and maximum values.

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

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

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

Gets sets value in tabIndex for editor.

        //Initialize
        $(".selector").igDateEditor({
            tabIndex : 3
        });

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

        //Set
        $(".selector").igDateEditor("option", "tabIndex", 3);
	  

Sets gets 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.

        //Initialize
        $(".selector").igDateEditor({
            textAlign : "center"
        });

        //Get
        var textAlign = $(".selector").igDateEditor("option", "textAlign");

        //Set
        $(".selector").igDateEditor("option", "textAlign", "center");
	  

Sets gets selector for css classes used by editor.
That option allows replacing all default css styles of editor by custom values.
Application should provide css classes for all members defined in the css options with "theme" selector.
For example, if that property is set to "mytheme", then application should provide following css classes:
.mytheme .ui-igedit-field{...};
.mytheme .ui-igedit-focus{...};
etc.
Note: changing theme is not supported when base element is INPUT or TEXTAREA and renderInContainer or button are not enabled.

        //Initialize
        $(".selector").igDateEditor({
            theme : "redmond"
        });

        //Get
        var theme = $(".selector").igDateEditor("option", "theme");

        //Set
        $(".selector").igDateEditor("option", "theme", "redmond");
	  

Sets type of editor. If that option is not set, but the 'value' option is defined, then if type of 'value' is Number, then the 'numeric' type is used, if type of 'value' is Date, then the 'date' type is used. For all other types of 'value' the 'text' type is used. Note: if that option is set to 'datepicker', then application should ensure that css and js files used by jquery.ui.datepicker are available.

      //Initialize
      $(".selector").igDateEditor({
	      type: "text"
      });
 
      //Get
      var type= $(".selector").igDateEditor("option", "type");

      //Set
      $(".selector").igDateEditor("option", "type", 0);
	  

Set gets ability to use last valid date when user entered invalid value.
Value of true allows automatically use last valid date, when editor loses focus and user failed to enter a valid date.
In case of value false, the entered date is considered invalid and null is used.

      //Initialize
      $(".selector").igDateEditor({
          useLastGoodDate : true
      });
      
      //Get
      var useLastGoodDate = $(".selector").igDateEditor("option", "useLastGoodDate");
        
      //Set
      $(".selector").igDateEditor("option", "useLastGoodDate", true);
	  

Sets gets options supported by igValidator.
In order to enable validation and use defaults, an empty object can be used.
Note: validation rules of igValidator, such as min, max, minLength, required are not supported, but similar properties of igEditor should be used.

        //Initialize
        $(".selector").igDateEditor({
            validatorOptions : {
                onblur: true,
                keepFocus: "once"
            }
        });

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

        //Set
        $(".selector").igDateEditor("option", "validatorOptions", {onblur: true, keepFocus: "once"});
      

Gets sets value in editor. The effect of setting/getting that option depends on type of editor and on dataMode options. That can be string, number or Date depending on type of editor. If it is used on initialization and the type option is missing, then if 'value' is Number, then 'numeric' editor is created automatically and if 'value' is Date, then the 'date' editor is created.

        //Initialize
        $(".selector").igDateEditor({
            value : 42
        });

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

        //Set
        $(".selector").igDateEditor("option", "value", 42);
	  

Sets gets width of editor in pixels.
Only positive values have effect. If that option is not set, then value of style.width of base html element will be used automatically. However, that value should be in the px units.

        //Initialize
        $(".selector").igDateEditor({
            width : 200
        });

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

        //Set
        $(".selector").igDateEditor("option", "width", 200);
	  

Sets gets difference between year in Gregorian calendar and displayed year.

      //Initialize
      $(".selector").igDateEditor({
          yearShift : 4500
      });

      //Get
      var yearShift = $(".selector").igDateEditor("option", "yearShift");

      //Set
      $(".selector").igDateEditor("option", "yearShift", 4500);