Ignite UI API Reference

ui.igDatePicker

ui.igDatePicker_image

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",
                required: true,
                nullText: "Pick Date",
                datepickerOptions: {
                    showWeek: true
                }
            });
        });
    </script>
</head>
<body>
    <input id="datePicker" />
</body>
</html>
	

Related Samples

Related Topics

Dependencies

jquery-1.4.4.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.datepicker.js
infragistics.util.js

Inherits

  • &nbsp;animationHideDuration

    Type:
    number
    Default:
    200

    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.

    Code Sample

          //Initialize
          $(".selector").igEditor({
              animationHideDuration: 200
          });
     
          //Get
          var animationHideDuration= $(".selector").igDatePicker("option", "animationHideDuration");
     
          //Set
          $(".selector").igDatePicker("option", "animationHideDuration", 200);
    	  
  • &nbsp;animationShowDuration

    Type:
    number
    Default:
    200

    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.

    Code Sample

          //Initialize
          $(".selector").igDatePicker({
            animationShowDuration: 200
          });
     
          //Get
          var animationShowDuration= $(".selector").igDatePicker("option", "animationShowDuration");
     
          //Set
          $(".selector").igDatePicker("option", "animationShowDuration", 200);
    	  
  • button

    Type:
    enumeration
    Default:
    dropdown

    Sets gets visibility of spin and drop-down button. That option can be set only on initialization.

    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({
                button : "dropdown"
            });
    
            //Get
            var button = $(".selector").igDatePicker("option", "button");
    
            //Set
            $(".selector").igDatePicker("option", "button", "spin");
          
  • &nbsp;centuryThreshold

    Type:
    number
    Default:
    29

    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.

    Code Sample

          //Initialize
          $(".selector").igDatePicker({
              centuryThreshold: 35
          });
            
          //Get
          var centuryThreshold = $(".selector").igDatePicker("option", "centuryThreshold");
            
          //Set
          $(".selector").igDatePicker("option", "centuryThreshold", 35);
    	  
  • &nbsp;dataMode

    Type:
    enumeration
    Default:
    date

    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.

    Members

    • date
    • Type:string
    • The Date object is used. Note: that is used as default.
    • 0
    • Type:number
    • The Date object is used. Note: that is used as default.
    • editModeText
    • Type:string
    • The String object is used and the "text" in edit mode (focus) format (pattern).
    • 1
    • Type:number
    • The String object is used and the "text" in edit mode (focus) format (pattern).
    • text
    • Type:string
    • The String object is used and the "text" in display mode (no focus) format (pattern).
    • 2
    • Type:number
    • The String object is used and the "text" in display mode (no focus) format (pattern).

    Code Sample

          //Initialize
          $(".selector").igDatePicker({
              dataMode: "text"
          });
            
          //Get
          var dataMode = $(".selector").igDatePicker("option", "dataMode");
            
          //Set
          $(".selector").igDatePicker("option", "dataMode", "text");
    	  
  • &nbsp;dateDisplayFormat

    Type:
    string
    Default:
    null

    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.

    Code Sample

          //Initialize
          $(".selector").igDatePicker({
              dateDisplayFormat: "dateLong"
          });
            
          //Get
          var dateDisplayFormat = $(".selector").igDatePicker("option", "dateDisplayFormat");
            
          //Set
          $(".selector").igDatePicker("option", "dateDisplayFormat", "dateLong");
    	  
  • &nbsp;dateInputFormat

    Type:
    string
    Default:
    null

    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.

    Code Sample

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

    Type:
    object
    Default:
    null

    Sets gets options supported by the jquery.ui.datepicker. Only options related to drop-down calendar are supported.

    Code Sample

    	    //Initialize
    	    $(".selector").igDatePicker({
    		    datepickerOptions: {showWeek: true}
    	    });
            
          //Get
          var datepickerOptions = $(".selector").igDatePicker("option", "datepickerOptions");
            
          //Set
          $(".selector").igDatePicker("option", "datepickerOptions", { showWeek: true });
    	  
  • &nbsp;display

    Type:
    string
    Default:
    inline-block

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                display : "block"
            });
    
            //Get
            var display = $(".selector").igDatePicker("option", "display");
    
            //Set
            $(".selector").igDatePicker("option", "display", "block");
    	    
  • &nbsp;dropDownOnReadOnly

    Type:
    bool
    Default:
    false

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                dropDownOnReadOnly : true
            });
    
            //Get
            var readOnly = $(".selector").igDatePicker("option", "dropDownOnReadOnly");
    
            //Set
            $(".selector").igDatePicker("option", "dropDownOnReadOnly", true);      
    	  
  • &nbsp;dropDownTriggers

    Type:
    enumeration
    Default:
    button,ctrl+arrow,alt+arrow

    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.

    Members

    • arrow
    • Type:string
    • Down-arrow shows drop-down and up-arrow hides drop-down;.
    • button
    • Type:string
    • Shows and hides drop-down;.
    • focus
    • Type:string
    • Shows drop-down on focus.
    • A-Z
    • Type:string
    • Any upper case characters show drop-down.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                dropDownTriggers : "button,0,1,2,3,4,5,6,7,8,9"
            });
    
            //Get
            var triggers = $(".selector").igDatePicker("option", "dropDownTriggers");
    
            //Set
            $(".selector").igDatePicker("option", "dropDownTriggers", "button,0,1,2,3,4,5,6,7,8,9");
    	  
  • &nbsp;enableUTCDates

    Type:
    bool
    Default:
    false

    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.

  • focusOnDropDownOpen

    Type:
    bool
    Default:
    null

    Sets gets ability to automatically focus the input, when a calendar is opened.
    Possible values:
    true - keep focus in INPUT field (touch devices might pop-up keyboard when calendar is opened)
    false - prevent focus in INPUT field when calendar is opened (touch devices should not show keyboard)
    null - attempt to detect touch/mobile device and prevent focus in INPUT field when calendar is opened.

  • &nbsp;focusOnSpin

    Type:
    bool
    Default:
    false

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                focusOnSpin : true
            });
    
            //Get
            var focusOnSpin = $(".selector").igDatePicker("option", "focusOnSpin");
    
            //Set
            $(".selector").igDatePicker("option", "focusOnSpin", true);
    	  
  • &nbsp;height

    Type:
    number
    Default:
    null

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                height : 25
            });
    
            //Get
            var height = $(".selector").igDatePicker("option", "height");
    
            //Set
            $(".selector").igDatePicker("option", "height", 25);
    	  
  • &nbsp;hideEnterKey

    Type:
    bool
    Default:
    true

    Sets gets ability to hide the Enter key from browser.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                hideEnterKey : false
            });
    
            //Get
            var hideEnterKey = $(".selector").igDatePicker("option", "hideEnterKey");
    
            //Set
            $(".selector").igDatePicker("option", "hideEnterKey", false);
    	  
  • &nbsp;hideMaskOnFocus

    Type:
    bool
    Default:
    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                hideMaskOnFocus : false
            });
    
            //Get
            var hideMaskOnFocus = $(".selector").igDatePicker("option", "hideMaskOnFocus");
    
            //Set
            $(".selector").igDatePicker("option", "hideMaskOnFocus", false);
    	  
  • &nbsp;inputName

    Type:
    string
    Default:
    null

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

    Code Sample

          //Initialize 
          $(".selector").igDatePicker({     
              inputName : "textField"
          });  
     
          //Get 
          var inputName = $(".selector").igDatePicker("option", "inputName");  
     
          //Set 
          $(".selector").igDatePicker("option", "inputName", "textField");
          
  • &nbsp;listColumns

    Type:
    number
    Default:
    1

    Sets gets number of columns in drop-down list.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                listColumns : 2
            });
    
            //Get
            var listColumns = $(".selector").igDatePicker("option", "listColumns");
    
            //Set
            $(".selector").igDatePicker("option", "listColumns", 2);
    	  
  • &nbsp;listDropDownAsChild

    Type:
    bool
    Default:
    false

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

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                listDropDownAsChild : true
            });
    
            //Get
            var listChild = $(".selector").igDatePicker("option", "listDropDownAsChild");
    
            //Set
            $(".selector").igDatePicker("option", "listDropDownAsChild", true);
    	  
  • &nbsp;listItems

    Type:
    array
    Default:
    null
    Elements Type:

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                listItems : [
                    "red",
                    "blue",
                    "yellow"
                ]
            });
    
            //Get
            var listItems = $(".selector").igDatePicker("option", "listItems");
    
            //Set
            $(".selector").igDatePicker("option", "listItems", ["red", "blue", "yellow"]);
    	  
  • &nbsp;listMaxHeight

    Type:
    number
    Default:
    300

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                listMaxHeight : 400
            });
    
            //Get
            var listMaxHeight = $(".selector").igDatePicker("option", "listMaxHeight");
    
            //Set
            $(".selector").igDatePicker("option", "listMaxHeight", 400);
    	  
  • &nbsp;listWidth

    Type:
    number
    Default:
    0

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                listWidth : 200
            });
    
            //Get
            var listWidth = $(".selector").igDatePicker("option", "listWidth");
    
            //Set
            $(".selector").igDatePicker("option", "listWidth", 200);
    	  
  • &nbsp;locale

    Type:
    object
    Default:
    null

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                locale : "th"
            });
    
            //Get
            var locale = $(".selector").igDatePicker("option", "locale");
    
            //Set
            $(".selector").igDatePicker("option", "locale", "th");
    	  
  • &nbsp;maxValue

    Type:
    date
    Default:
    null

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

    Code Sample

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

    Type:
    number
    Default:
    3

    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.

    Code Sample

    	    //Initialize
          $(".selector").igDatePicker({
              minNumberOfDateFields: 5
          });
            
          //Get
          var minNumberOfDateFields = $(".selector").igDatePicker("option", "minNumberOfDateFields");
            
          //Set
          $(".selector").igDatePicker("option", "minNumberOfDateFields", 5);
    	  
  • &nbsp;minValue

    Type:
    date
    Default:
    null

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

    Code Sample

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

    Type:
    bool
    Default:
    true

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

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                nullable : false
            });
    
            //Get
            var nullable = $(".selector").igDatePicker("option", "nullable");
    
            //Set
            $(".selector").igDatePicker("option", "nullable", false);
    	  
  • &nbsp;nullText

    Type:
    string
    Default:
    null

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

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                nullText : "Enter Value"
            });
    
            //Get
            var nullText = $(".selector").igDatePicker("option", "nullText");
    
            //Set
            $(".selector").igDatePicker("option", "nullText", "Enter Value");
    	  
  • &nbsp;promptChar

    Type:
    string
    Default:
    _

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

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                promptChar : "*"
            });
            
            //Get
            var prompt = $(".selector").igDatePicker("option", "promptChar");
            
            //Set
            $(".selector").igDatePicker("option", "promptChar", "*");
    	  
  • &nbsp;readOnly

    Type:
    bool
    Default:
    false

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

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                readOnly : true
            });
    
            //Get
            var readOnly = $(".selector").igDatePicker("option", "readOnly");
    
            //Set
            $(".selector").igDatePicker("option", "readOnly", true);
    	  
  • &nbsp;reduceDayOfInvalidDate

    Type:
    bool
    Default:
    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".

    Code Sample

          //Initialize
          $(".selector").igDatePicker({
              reduceDayOfInvalidDate : false
          });
          
          //Get
          var reduceDayOfInvalidDate = $(".selector").igDatePicker("option", "reduceDayOfInvalidDate");
            
          //Set
          $(".selector").igDatePicker("option", "reduceDayOfInvalidDate", false);
    	  
  • &nbsp;regional

    Type:
    object
    Default:
    null

    Sets gets 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");
    	  
  • &nbsp;renderInContainer

    Type:
    bool
    Default:
    false

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                renderInContainer : true
            });
    
            //Get
            var renderInContainer = $(".selector").igDatePicker("option", "renderInContainer");
    
            //Set
            $(".selector").igDatePicker("option", "renderInContainer", true);
    	  
  • &nbsp;required

    Type:
    bool
    Default:
    false

    Set gets validation for empty value in editor.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                required : true
            });
    
            //Get
            var isRequired = $(".selector").igDatePicker("option", "required");
    
            //Set
            $(".selector").igDatePicker("option", "required", true);
    	  
  • &nbsp;selectionOnFocus

    Type:
    enumeration
    Default:
    -1

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

    Members

    • select
    • Type:string
    • Select all text.
    • -1
    • Type:number
    • Select all text.
    • start
    • Type:string
    • Set caret at the beginning of text.
    • 0
    • Type:number
    • Set caret at the beginning of text.
    • end
    • Type:string
    • Set caret at the end of text.
    • 1
    • Type:number
    • Set caret at the end of text.
    • default
    • Type:string
    • Use default behavior of browser (in case of mask, numeric and date editors it may be unreliable).
    • 2
    • Type:number
    • Use default behavior of browser (in case of mask, numeric and date editors it may be unreliable).

    Code Sample

    		//Initialize
    		$(".selector").igDatePicker({
    			selectionOnFocus: -1
    		});
     
    		//Get
    		var selectionOnFocus= $(".selector").igDatePicker("option", "selectionOnFocus");
    
    		//Set
    		$(".selector").igDatePicker("option", "selectionOnFocus", -1);
    	  
  • &nbsp;spin1Field

    Type:
    bool
    Default:
    false

    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.

    Code Sample

    		  //Initialize
    		  $(".selector").igDatePicker({
    			  spin1Field : false
    		  });
    		  
    		  //Get
    		  var spin1Field = $(".selector").igDatePicker("option", "spin1Field");
    			
    		  //Set
    		  $(".selector").igDatePicker("option", "spin1Field", false);
    	  
  • &nbsp;spinDelta

    Type:
    number
    Default:
    1

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

    Code Sample

             //Initialize
             $(".selector").igDatePicker({
             spinDelta: 1
             });
     
            //Get
            var spinDelta= $(".selector").igDatePicker("option", "spinDelta");
     
            //Set
            $(".selector").igDatePicker("option", "spinDelta", 1);
    	  
  • &nbsp;spinOnReadOnly

    Type:
    bool
    Default:
    false

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                spinOnReadOnly : true
            });
    
            //Get
            var spinOnReadOnly = $(".selector").igDatePicker("option", "spinOnReadOnly");
    
            //Set
            $(".selector").igDatePicker("option", "spinOnReadOnly", true);
    	  
  • &nbsp;spinWrapAround

    Type:
    bool
    Default:
    false

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                spinWrapAround : true
            });
    
            //Get
            var spinWrapAround = $(".selector").igDatePicker("option", "spinWrapAround");
    
            //Set
            $(".selector").igDatePicker("option", "spinWrapAround", true);
    	  
  • &nbsp;tabIndex

    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);
    	  
  • &nbsp;textAlign

    Type:
    enumeration
    Default:
    null

    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.

    Members

    • null
    • Type:object
    • 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");
    	  
  • &nbsp;theme

    Type:
    string
    Default:
    null

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                theme : "redmond"
            });
    
            //Get
            var theme = $(".selector").igDatePicker("option", "theme");
    
            //Set
            $(".selector").igDatePicker("option", "theme", "redmond");
    	  
  • &nbsp;type

    Type:
    enumeration
    Default:
    null

    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.

    Members

    • text
    • Type:string
    • Text editor is created.
    • 0
    • Type:number
    • Text editor is created (same as 'text').
    • mask
    • Type:string
    • Mask editor is created.
    • 1
    • Type:number
    • Mask editor is created (same as 'mask').
    • date
    • Type:string
    • Date-time editor is created.
    • 2
    • Type:number
    • Date-time editor is created (same as 'date').
    • datepicker
    • Type:string
    • Date-picker is created.
    • 3
    • Type:number
    • Date-picker is created (same as 'datepicker').
    • numeric
    • Type:string
    • Numeric editor is created.
    • 4
    • Type:number
    • Numeric editor is created (same as 'numeric').
    • currency
    • Type:string
    • Currency editor is created.
    • 5
    • Type:number
    • Currency editor is created (same as 'currency').
    • percent
    • Type:string
    • Percent editor is created.
    • 6
    • Type:number
    • Percent editor is created (same as 'percent').

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
    			    type: "text"
    		    });
     
    		    //Get
    		    var type= $(".selector").igDatePicker("option", "type");
    
    		    //Set
    		    $(".selector").igDatePicker("option", "type", 0);
    	  
  • &nbsp;useLastGoodDate

    Type:
    bool
    Default:
    false

    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.

    Code Sample

    		  //Initialize
    		  $(".selector").igDatePicker({
    		    useLastGoodDate : true
    		  });
    
    		  //Get
    		  var useLastGoodDate = $(".selector").igDatePicker("option", "useLastGoodDate");
    
    		  //Set
    		  $(".selector").igDatePicker("option", "useLastGoodDate", true);
    	  
  • &nbsp;validatorOptions

    Type:
    object
    Default:
    null

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                validatorOptions : {
                    onblur: true,
                    keepFocus: "once"
                }
            });
    
            //Get
            var validatorOptions = $(".selector").igDatePicker("option", "validatorOptions");
    
            //Set
            $(".selector").igDatePicker("option", "validatorOptions", {onblur: true, keepFocus: "once"});
    	  
  • &nbsp;value

    Type:
    object
    Default:
    null

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                value : new Date()
            });
    
            //Get
            var value = $(".selector").igDatePicker("option", "value");
    
            //Set
            $(".selector").igDatePicker("option", "value", new Date());
    	  
  • &nbsp;width

    Type:
    number
    Default:
    null

    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.

    Code Sample

            //Initialize
            $(".selector").igDatePicker({
                width : 200
            });
    
            //Get
            var width = $(".selector").igDatePicker("option", "width");
    
            //Set
            $(".selector").igDatePicker("option", "width", 200);
    	  
  • &nbsp;yearShift

    Type:
    number
    Default:
    0

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

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
  • &nbsp;blur

    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) { ... }
              });
    	  
  • &nbsp;buttonClick

    Cancellable:
    false

    Event which is raised when button was clicked by mouse.
    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", "igdatepickerbuttonclick", function (evt) {
                  //return browser event
                  evt.originalEvent;
              });
              
              //Initialize
              $(".selector").igDatePicker({
                  buttonClick: function (evt) { ... }
              });
    	  
  • &nbsp;focus

    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) { ... }
              });
    	  
  • &nbsp;hideDropDown

    Cancellable:
    true

    Event which is raised before drop-down list or calendar is opened.
    Function takes argument evt and ui.
    Use evt.originalEvent to obtain reference to event of browser.
    Use ui.owner to obtain reference to igEditor.
    Use ui.value to obtain reference to the selected item in list or Date in calendar.
    If ui.value is not null and not undefined, that it means that drop-down was closed due to selection from drop-down list or from calendar.
    Otherwise, drop-down was closed due to lost focus or Esc key press.
    Return false in order to cancel hide action and keep drop-down visible.
    It is not recommended to cancel that action on blur event.
    Note: In case of calendar of datepicker, the evt or evt.originalEvent can be null. That happens if calendar was closed on blur or by Esc key.
    Returning the false in this situation will not prevent closing drop-down calendar.

    Code Sample

              //  Bind
              $(document).delegate(".selector", "igdatepickerhidedropdown", function (evt, ui) {
                  //return browser event
                  evt.originalEvent;
    
                  //return true if the drop down is closed due to selection and false if the drop down is closed due to losing focus or pressing Esc
                  ui.value;
              });
    
              //Initialize
              $(".selector").igDatePicker({
                  hideDropDown: function (evt, ui) { ... }
              });
    	  
  • &nbsp;invalidValue

    Cancellable:
    false

    Event which is raised on lost focus when editor contains invalid value. That event is available for all editors besides default "text" type editor.
    Function takes arguments evt and ui.
    Use ui.owner to obtain reference to igEditor.
    Use ui.value to obtain suggested value.
    Set ui.value to change suggested value.
    If type of editor is numeric, currency, percent, date or datepicker, then ui.text contains actual text entered by user.
    If type of editor is numeric, currency or percent, then the ui.reason may have following flags: "null", "format" or "limit".
    If type of editor is date or datepicker, then ui contains following additional members:
    ui.reason may have following flags: "null", "dayOfMonth", "numberOfFields", "limit" or "invalid";
    ui.year - year of entered date;
    ui.month - month of entered date;
    ui.day - day of entered date;
    ui.hours - hours of entered date;
    ui.minutes - minutes of entered date;
    ui.seconds - seconds of entered date;
    ui.milliseconds - milliseconds of entered date.

    Code Sample

              //  Bind
              $(document).delegate(".selector", "igdatepickerinvalidvalue", function (evt, ui) {
                  //return browser event
                  evt.originalEvent;
    
                  //obtains the suggested value
                  ui.value;
                  //if type is numeric, currency, percent, date or datepicker contains actual text entered by user
                  ui.text
    
                  //if editor is date or datepicker you have these additional members:
        
                  //may have following flags: "null", "dayOfMonth", "numberOfFields", "limit", "invalid"
                  ui.reason;
                  //year of entered date
                  ui.year;
                  //month of entered date
                  ui.month;
                  //day of entered date
                  ui.day;
                  //hours of entered date
                  ui.hours;
                  //minutes of entered date
                  ui.minutes;
                  //seconds of entered date
                  ui.seconds;
                  //milliseconds of entered date
                  ui.milliseconds;
              });
    
              //Initialize
              $(".selector").igDatePicker({
                  invalidValue: function (evt, ui) { ... }
              });
    	  
  • &nbsp;keydown

    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) {
                //use to obtain value of keyCode
                ui.key;
    		      });
    
    		      //Initialize
    		      $(".selector").igDatePicker({
    		        keydown: function (evt, ui) { ... }
    		      });
    	  
  • &nbsp;keypress

    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) {
                  //use to obtain value of keyCode
                  ui.key;
                  //set the ui.key to "A" -a cahracter which will replace the original entry
                  ui.key = 65;
              });
    
              //Initialize
              $(".selector").igDatePicker({
                  keypress: function (evt, ui) { ... }
              });
    	  
  • &nbsp;keyup

    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) {
                  //use to obtain value of keyCode
                  ui.key;
              });
    
              //Initialize
              $(".selector").igDatePicker({
                  keyup: function (evt, ui) { ... }
              });
    	  
  • &nbsp;listSelected

    Cancellable:
    false

    Event which is raised after list item was selected.
    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.index to get new selected index.
    Use ui.oldIndex to get old selected index.
    Use ui.item to get reference to new selected item.

    Code Sample

              //  Bind
              $(document).delegate(".selector", "igdatepickerlistselected", function (evt, ui) {
                  //return browser event
                  evt.originalEvent;
                  //gets the new selected index
                  ui.index;
                  //gets the old selected index
                  ui.oldIndex;
                  //gets reference to the new selected item
                  ui.item;
              });
    
              //Initialize
              $(".selector").igDatePicker({
                  listselected: function (evt, ui) { ... }
              });
    	  
  • &nbsp;listSelecting

    Cancellable:
    true

    Event which is raised before list item is selected.
    Return false in order to cancel select 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.index to get new selected index.
    Use ui.oldIndex to get old selected index.
    Use ui.item to get reference to new selected item.

    Code Sample

              //  Bind
              $(document).delegate(".selector", "igdatepickerlistselecting", function (evt, ui) {
                  //return browser event
                  evt.originalEvent;
                  //gets the new selected index
                  ui.index;
                  //gets the old selected index
                  ui.oldIndex;
                  //gets reference to the new selected item
                  ui.item;
              });
    
              //Initialize
              $(".selector").igDatePicker({
                  listselecting: function (evt, ui) {
                  ...
                  }
              });
    	  
  • &nbsp;mousedown

    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, 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({
                  mousedown: function (evt, ui) { ... }
              });
    	  
  • &nbsp;mouseleave

    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", "igdatepickermouseleave", function (evt, ui) {
                  //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({
                  mouseleave: function (evt, ui) { ... }
              });
    	  
  • &nbsp;mousemove

    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, 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({
                  mousemove: function (evt, ui) { ... }
              });
    	  
  • &nbsp;mouseover

    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) {
                  //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) { ... }
              });
    	  
  • &nbsp;mouseup

    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, 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({
                  mouseup: function (evt, ui) { ... }
              });
    	  
  • &nbsp;showDropDown

    Cancellable:
    true

    Event which is raised before drop-down list or calendar is opened.
    Return false in order to cancel drop-down action.
    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", "igdatepickershowdropdown", function (evt) {
                  //return browser event
                  evt.originalEvent;
              });
    
              //Initialize
              $(".selector").igDatePicker({
                  showDropDown: function (evt) { ... }
              });
    	  
  • &nbsp;spin

    Cancellable:
    true

    Event which is raised on spin event.
    Return false in order to cancel spin.
    Function takes arguments evt and ui.
    Use ui.owner to obtain reference to igEditor.
    Use ui.delta to obtain delta for increment or decrement.
    Use ui.value to obtain the "value" of editor before spin action.

    Code Sample

              //  Bind
              $(document).delegate(".selector", "igdatepickerspin", function (evt, ui) {
                  //gets delta for increment or decrement
                  ui.delta;
                  //gets the "value" of editor before spin action
                  ui.value;
              });
    
              //Initialize
              $(".selector").igDatePicker({
                  spin: function (evt, ui) { ... }
              });
    	  
  • &nbsp;textChanged

    Cancellable:
    false

    Event which is raised after text in editor was changed.
    Function takes arguments evt and ui.
    Use ui.owner to obtain reference to igEditor.
    Use ui.value to obtain new value and ui.oldValue to obtain old value.

    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) { ... }
              });
    	  
  • &nbsp;valueChanged

    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.value to obtain new value and ui.oldValue to obtain old value.

    Code Sample

              //  Bind
              $(document).delegate(".selector", "igdatepickervaluechanged", function (evt, ui) {
                //gets the new value
                ui.value;
                //gets the old value
                ui.oldValue;
              });
    
              //Initialize
              $(".selector").igDatePicker({
                valueChanged: function (evt, ui) { ... }
              });
    	  
  • &nbsp;valueChanging

    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.value to obtain new value and ui.oldValue to obtain old value.

    Code Sample

              //  Bind
              $(document).delegate(".selector", "igdatepickervaluechanging", function (evt, ui) {
                  //gets the new value
                  ui.value;
                  //gets the old value
                  ui.oldValue;
              });
    
              //Initialize
              $(".selector").igDatePicker({
                  valueChanging: function (evt, ui) { ... }
              });
    	  
  • &nbsp;addListItem

    .igDatePicker( "addListItem", item:object, [index:number] );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Adds item to list.

    • item
    • Type:object
    • Item for list. It can be string, number or Date object.
    • index
    • Type:number
    • Optional
    • Index within current list where item is inserted. If parameter is missing or too large or negative, then item is appended to list.

    Code Sample

    		$(".selector").igDatePicker("addListItem", new Date(), 0);
    	  
  • &nbsp;addListItems

    .igDatePicker( "addListItems", items:object, [index:number] );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Adds several items to list.

    • items
    • Type:object
    • Array of items.
    • index
    • Type:number
    • Optional
    • Index within current list where items are inserted. If parameter is missing or too large or negative, then items are appended to list.

    Code Sample

    		$(".selector").igDatePicker("addListItems", [ new Date(), new Date(2002, 10, 2) ], 0);
    	  
  • &nbsp;clearListItems

    .igDatePicker( "clearListItems" );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Removes all items from list.

    Code Sample

    		$(".selector").igDatePicker("clearListItems");
    	  
  • &nbsp;destroy

    .igDatePicker( "destroy" );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Destroys editor and return base element back to its pre-init state.

    Code Sample

    		$(".selector").igDatePicker("destroy");
    	  
  • &nbsp;dropDownElement

    .igDatePicker( "dropDownElement" );

    Gets reference to jquery object which is used as container of drop-down.
    returnType="$" Returns reference to jquery object or null. That can be container of list items or in case of igDatePicker it can be calendar of jquery.datepicker.

    Code Sample

    		var container = $(".selector").igDatePicker("dropDownElement");
    	  
  • &nbsp;dropDownVisible

    .igDatePicker( "dropDownVisible", [showHide:bool] );

    Gets sets visibility of drop-down list.
    returnType="bool|object" If parameter is defined, then returns reference to this igCombo, otherwise, returns true if drop down is visible and false if drop down is hidden.

    • showHide
    • Type:bool
    • Optional
    • Value true will show dropdown, false - hide dropdown. .

    Code Sample

            //Get
            var isVisible = $(".selector").igDatePicker("dropDownVisible");
    
            //Set
            $(".selector").igDatePicker("dropDownVisible", true);
    	  
  • &nbsp;field

    .igDatePicker( "field" );

    Gets reference to jquery object which is used as edit field.
    returnType="$" Returns reference to jquery object. That can be INPUT or TEXTAREA.

    Code Sample

    		var field = $(".selector").igDatePicker("field");
    	  
  • &nbsp;findListItemIndex

    .igDatePicker( "findListItemIndex", text:string, [ignoreCase:bool], [partial:bool], [contains:bool] );
    Return Type:
    number
    Return Type Description:
    Returns index of item or -1.

    Finds index of list item by text.

    • text
    • Type:string
    • Text to search.
    • ignoreCase
    • Type:bool
    • Optional
    • Value true sets request to ignore case.
    • partial
    • Type:bool
    • Optional
    • Value true will perform partial search rather than full match.
    • contains
    • Type:bool
    • Optional
    • Value true will perform search anywhere within text of item, otherwise starts-with search is used.

    Code Sample

    		var index = $(".selector").igDatePicker("findListItemIndex", "search value", true);
    	  
  • &nbsp;getRegionalOption

    .igDatePicker( "getRegionalOption", name:string );
    Return Type:
    string
    Return Type Description:
    Returns value of option used by editor.

    Gets calculated value of regional option used by numeric and date editors.

    • name
    • Type:string
    • Name of regional option, such as "monthNames", "dateLongPattern", "currencySymbol", etc.

    Code Sample

    		var dayNames = $(".selector").igDatePicker("getRegionalOption", "dayNames");
    	  
  • &nbsp;getSelectedListItem

    .igDatePicker( "getSelectedListItem" );

    Gets reference to selected item in list.
    returnType="string|number|date|object" Returns reference to selected item or null.

    Code Sample

    		var item = $(".selector").igDatePicker("getSelectedListItem");
    	  
  • &nbsp;getSelectedText

    .igDatePicker( "getSelectedText" );
    Return Type:
    string
    Return Type Description:
    Returns selected text.

    Gets selected text in editor.

    Code Sample

    		var text = $(".selector").igDatePicker("getSelectedText");
    	  
  • &nbsp;getSelection

    .igDatePicker( "getSelection", [start:bool] );
    Return Type:
    number
    Return Type Description:
    Position of left or right edge of selection.

    Gets left or right edge of selection. That method can be used only when editor has focus.

    • start
    • Type:bool
    • Optional
    • If true then left edge of selection is returned. Otherwise, right edge selection is returned.

    Code Sample

    		$(".selector").igDatePicker("getSelection", true);
    	  
  • &nbsp;getValueByMode

    .igDatePicker( "getValueByMode", mode:string, [v:object], [getVal:object] );

    Get value in editor by dataMode.
    returnType="string|number|date|object" Returns value in editor or null.

    • mode
    • Type:string
    • The value of dataMode option supported by editor. It can be string or number. For example, in case of numeric editors that can be a number in range from -1 to 11, or string such as "text", "double", "byte", etc.
    • v
    • Type:object
    • Optional
    • Internal use only.
    • getVal
    • Type:object
    • Optional
    • Internal use only.

    Code Sample

    		var textValue = $(".selector").igDatePicker("getValueByMode", "text");
    	  
  • &nbsp;hasFocus

    .igDatePicker( "hasFocus" );
    Return Type:
    bool
    Return Type Description:
    Returns true if editor has focus.

    Checks if editor has focus.

    Code Sample

    		var focus = $(".selector").igDatePicker("hasFocus");
    	  
  • &nbsp;hasInvalidMessage

    .igDatePicker( "hasInvalidMessage" );
    Return Type:
    bool
    Return Type Description:
    Returns true if message is displayed.

    Checks if invalid message is displayed.

    Code Sample

    		var hasInvalidMessage = $(".selector").igDatePicker("hasInvalidMessage");
    	  
  • &nbsp;hide

    .igDatePicker( "hide" );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Hides editor.

    Code Sample

    		$(".selector").igDatePicker("hide");
    	  
  • &nbsp;isValid

    .igDatePicker( "isValid" );
    Return Type:
    bool
    Return Type Description:
    Returns true if value is valid, false - value is invalid.

    Checks if value in editor is value. Note: that method may fail if editor has focus (in edit mode).

    Code Sample

    		var isValid = $(".selector").igDatePicker("isValid");
    	  
  • &nbsp;mainElement

    .igDatePicker( "mainElement" );

    Gets reference to jquery object which is used as top/outer element of igEditor.
    returnType="$" Returns reference to jquery object.

    Code Sample

    		var element = $(".selector").igDatePicker("mainElement");
    	  
  • &nbsp;paste

    .igDatePicker( "paste", txt:string, [flag:bool] );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Paste text at location of caret. Note: method raises the "textChanged" event.

    • txt
    • Type:string
    • New text to paste.
    • flag
    • Type:bool
    • Optional
    • Internal use only.

    Code Sample

    		$(".selector").igDatePicker("paste", "text");
    	  
  • &nbsp;remove

    .igDatePicker( "remove" );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Removes editor from its parent element, but keeps the rest of functionality.

    Code Sample

    		$(".selector").igDatePicker("remove");
    	  
  • &nbsp;removeListItem

    .igDatePicker( "removeListItem", item:object );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Removes item from list.

    • item
    • Type:object
    • Current item in list. It can be string, number or Date object.

    Code Sample

    		$(".selector").igDatePicker("removeListItem", new Date("2012, 10, 10"));
    	  
  • &nbsp;removeListItemAt

    .igDatePicker( "removeListItemAt", index:number );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Removes item from list at index.

    • index
    • Type:number
    • Index of item. If it is negative number, then last item in list is removed.

    Code Sample

    		$(".selector").igDatePicker("removeListItemAt", 0);
    	  
  • &nbsp;select

    .igDatePicker( "select", [sel0:number], [sel1:number], [val:string] );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Selects text in editor. If parameters are equal, then than method sets location of caret. That method has effect only when editor has focus.

    • sel0
    • Type:number
    • Optional
    • Left edge of selection. If parameter is missing, then all text is selected.
    • sel1
    • Type:number
    • Optional
    • Right edge of selection. If parameter is missing, then value of first parameter is used.
    • val
    • Type:string
    • Optional
    • Internal use only (new text).

    Code Sample

    		$(".selector").igDatePicker("select", 1, 5);
    	  
  • &nbsp;selectedListIndex

    .igDatePicker( "selectedListIndex", [index:number] );
    Return Type:
    number
    Return Type Description:
    Returns index of selected item if parameter is undefined.

    Gets sets selected index of list item.

    • index
    • Type:number
    • Optional
    • Index of item.

    Code Sample

            //Get
            var index = $(".selector").igDatePicker("selectedListIndex");
    
            //Set
            $(".selector").igDatePicker("selectedListIndex", 1);
    	  
  • &nbsp;setFocus

    .igDatePicker( "setFocus", [delay:number] );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Set focus to editor with delay.

    • delay
    • Type:number
    • Optional
    • Delay in milliseconds. If parameter is missing, then 0 is used. If parameter is -1, then focus is set without delay.

    Code Sample

    		$(".selector").igDatePicker("setFocus", true);
    	  
  • &nbsp;show

    .igDatePicker( "show" );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Shows editor (if it was hidden).

    Code Sample

    		$(".selector").igDatePicker("show");
    	  
  • &nbsp;spin

    .igDatePicker( "spin", delta:number );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igEditor.

    Increments of decrements value in editor according to the parameter.
    If editor has listItems, then that method increments or decrements selected index in list and sets value in editor to new selected item.
    In this case if delta is positive, then list selected index in incremented by 1 and if delta is negative then selected index is decremented by 1.

    • delta
    • Type:number
    • Value to increment or decrement current value in editor.

    Code Sample

    		$(".selector").igDatePicker("spin", 1);
    	  
  • &nbsp;text

    .igDatePicker( "text", [val:string], [flag:number] );

    Gets sets text in editor.
    returnType="string|object" Returns text in editor if parameter is undefined. Otherwise, it returns reference to this igEditor.

    • val
    • Type:string
    • Optional
    • New text for editor.
    • flag
    • Type:number
    • Optional
    • Internal use only.

    Code Sample

            //Get
            var text = $(".selector").igDatePicker("text");
    
            //Set
            $(".selector").igDatePicker("text", new Date().toString());
    	  
  • &nbsp;validate

    .igDatePicker( "validate", [noLabel:bool] );
    Return Type:
    bool
    Return Type Description:
    Returns true if value is valid, false - if value is invalid and error message was displayed.

    Triggers validation of editor and show error message. That method has effect only when validation is enabled.

    • noLabel
    • Type:bool
    • Optional
    • Value of true will allow to skip error message if validation failed.

    Code Sample

    		$(".selector").igDatePicker("validate");
    	  
  • &nbsp;validator

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

    Gets reference to igValidator used by igEditor.

    Code Sample

    		var validator = $(".selector").igDatePicker("validator");
    	  
  • &nbsp;value

    .igDatePicker( "value", [val:object] );

    Gets sets value in editor.
    returnType="string|number|date|object" Returns value in editor if parameter is undefined. Otherwise, it returns reference to this igEditor.

    • val
    • Type:object
    • Optional
    • New value for editor. It can be string, number or Date object.

    Code Sample

            //Get
            var editorVal = $(".selector").igDatePicker("value");
    
            //Set
            $(".selector").igDatePicker("value", new Date());
    	  
  • ui-igedit-button

    Class applied to the SPAN element which represents button. Default value is 'ui-igedit-button'.
  • ui-igedit-buttonclear

    Class applied to the SPAN element which represents clear button. Default value is 'ui-igedit-buttonclear'.
  • ui-igedit-buttonimage ui-icon-circle-close ui-icon

    Class applied to the SPAN element which represents image on clear button. Default value is 'ui-igedit-buttonimage ui-icon-circle-close ui-icon'.
  • ui-igedit-buttondefault ui-state-default

    Classes applied to the the SPAN element of button in default state (no focus, no mouse, no press). Default value is 'ui-igedit-buttondefault ui-state-default'.
  • ui-igedit-buttondisabled ui-state-disabled

    Classes applied to the SPAN element of button in disabled state. Default value is 'ui-igedit-buttondisabled ui-state-disabled'.
  • ui-igedit-buttonfocus

    Classes applied to the SPAN element of button when editor has focus. Default value is 'ui-igedit-buttonfocus'.
  • 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-buttonimage ui-icon-triangle-1-s ui-icon

    Classes applied to the SPAN element which represents image on dropdown/clear button. Default value is 'ui-igedit-buttonimage ui-icon-triangle-1-s ui-icon'.
  • ui-igedit-buttonimagedisabled

    Class applied to the SPAN element which represents image on button in disabled state. Default value is 'ui-igedit-buttonimagedisabled'.
  • ui-igedit-buttonimagehover

    Class applied to the SPAN element which represents image on button in mouse-over state. Default value is 'ui-igedit-buttonimagehover'.
  • ui-igedit-buttonimagepressed

    Class applied to the SPAN element which represents image on button in pressed state. Default value is 'ui-igedit-buttonimagepressed'.
  • 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-button-rtl

    Class applied to the SPAN element which represents button when direction is rtl. Default value is 'ui-igedit-button-rtl'.
  • ui-igedit-buttonsimagestateoverride

    Class applied to the images of buttons when editor has focus or mouse-over, but mouse-over does not belong to a particular button. Default value is 'ui-igedit-buttonsimagestateoverride'.
  • ui-igedit-container

    Class applied to the top element when editor is rendered in container. Default value is 'ui-igedit-container'.
  • ui-igedit-disabled ui-state-disabled

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

    Class applied to the drop-down element which contains list of items or datepicker-calendar. Default value is 'ui-igedit-dropdown'.
  • ui-igedit ui-state-default ui-widget ui-corner-all

    Class applied to the main/top element. Default value is 'ui-igedit ui-state-default ui-widget ui-corner-all'.
  • ui-igedit-field

    Class applied to the editing element. Default value is 'ui-igedit-field'.
  • ui-igedit-rtl

    Class applied to the field when direction is rtl. Default value is 'ui-igedit-rtl'.
  • ui-igedit-focus ui-state-focus

    Class applied to the editing element in focus state. Default value is 'ui-igedit-focus ui-state-focus'.
  • ui-igedit-hover ui-state-hover

    Class applied to the editing element in mouse-over state. Default value is 'ui-igedit-hover ui-state-hover'.
  • ui-igedit-list ui-widget ui-widget-content ui-corner-all

    Class applied to the DIV element which is used as container for dropdown list. Default value is 'ui-igedit-list ui-widget ui-widget-content ui-corner-all'.
  • 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-igedit-listitemcolumnborder

    Class applied to the SPAN elements located in columns on the right in dropdown list. That has effect only when multiple columns in list are enabled. Default value is 'ui-igedit-listitemcolumnborder'.
  • 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-negative

    Class applied to the editing element of numeric editor when value is negative. Default value is 'ui-igedit-negative'.
  • ui-igedit-no-bottom-corners

    Class applied to the main element when list is below editor and to list when list is above editor. Default value is 'ui-igedit-no-bottom-corners'.
  • ui-igedit-no-top-corners

    Class applied to the main element when list is above editor and to list when list is below editor. Default value is 'ui-igedit-no-top-corners'.
  • ui-igedit-nullvalue

    Class applied to the editing element when it has no value. Default value is 'ui-igedit-nullvalue'.
  • ui-igedit-spinbutton

    Class applied to the SPAN element which represents spin button. Default value is 'ui-igedit-spinbutton'.
  • ui-igedit-buttonimage ui-igedit-spinbuttonimage

    Class applied to the SPAN element which represents image on spin button. Default value is 'ui-igedit-spinbuttonimage ui-igedit-spinbuttonimage'.
  • ui-igedit-spinlowerimage ui-icon-carat-1-s ui-icon

    Class applied to the SPAN element which represents image on lower spin button. Default value is 'ui-igedit-spinlowerimage ui-icon-carat-1-s ui-icon'.
  • ui-igedit-spinlowerimagedisabled

    Class applied to the SPAN element which represents image on lower spin button in disabled state. Default value is 'ui-igedit-spinlowerimagedisabled'.
  • ui-igedit-spinlowerimagehover

    Class applied to the SPAN element which represents image on lower spin button in mouse-over state. Default value is 'ui-igedit-spinlowerimagehover'.
  • ui-igedit-spinlowerimagepressed

    Class applied to the SPAN element which represents image on lower spin button in pressed state. Default value is 'ui-igedit-spinlowerimagepressed'.
  • ui-igedit-spinupperimage ui-icon-carat-1-n ui-icon

    Class applied to the SPAN element which represents image on upper spin button. Default value is 'ui-igedit-spinupperimage ui-icon-carat-1-n ui-icon'.
  • ui-igedit-spinupperimagedisabled

    Class applied to the SPAN element which represents image on upper spin button in disabled state. Default value is 'ui-igedit-spinupperimagedisabled'.
  • ui-igedit-spinupperimagehover

    Class applied to the SPAN element which represents image on upper spin button in mouse-over state. Default value is 'ui-igedit-spinupperimagehover'.
  • ui-igedit-spinupperimagepressed

    Class applied to the SPAN element which represents image on upper spin button in pressed state. Default value is 'ui-igedit-spinupperimagepressed'.
  • ui-igedit-textarea

    Class applied to the TEXTAREA element. Default value is 'ui-igedit-textarea'.

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

#