Ignite UI™ API Documentation

ui.igDatePicker

Overview
Options
Events
Methods
Theming

The igDatePicker control extends the functionality of the igDateEditor control and requires the jQuery UI Datepicker script to be included in the page (jquery.ui.datepicker.js). For more details on the igDatePicker control’s API, refer to the igDateEditor and igEditor control’s API documentation. For more information on customizing the jQuery UI Datepicker, see the jQuery UI online documentation. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igDatePicker control.

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

Code Sample

 
			<!doctype html>
			<html>
			<head>
					<title>Ignite UI igDatePicker</title>
					<!-- Infragistics Combined CSS -->
					<link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
					<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
					<!-- jQuery Core -->
					<script src="js/jquery.js" type="text/javascript"></script>
					<!-- jQuery UI -->
					<script src="js/jquery-ui.js" type="text/javascript"></script>
					<!-- Infragistics Combined Scripts -->
					<script src="js/infragistics.core.js" type="text/javascript"></script>
					<script src="js/infragistics.lob.js" type="text/javascript"></script>
					<script type="text/javascript">
							$(function () {
									$("#datePicker").igDatePicker({
											width: 280,
											dateInputFormat: "dateTime",
											regional: "en-US",
											placeHolder: "Pick Date",
											datepickerOptions: {
													showWeek: true
											}
									});
							});
					</script>
			</head>
			<body>
					<input id="datePicker" />
			</body>
			</html>

Related Samples

Date Picker Overview

allowNullValue
Inherited

Type:: bool
Default:: false

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

Code Sample

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

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

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

buttonType

Type:

enumeration

Default:

dropdown
Gets visibility of the spin, clear and drop-down button. That option can be set only on initialization. Combinations like 'dropdown,spin' or 'spin,clear' are supported too.
Members
- dropdown
- Type:string
- A button to open/close the list is located on the right side of the editor.
- clear
- Type:string
- A button to clear the value is located on the right side of the editor.
- spin
- Type:string
- Spin buttons are located on the right side of the editor.
Code Sample
```
 
					//Initialize
					$(".selector").igDatePicker({
						buttonType : "dropdown"
					});
					//Get
					var button = $(".selector").igDatePicker("option", "buttonType");
					//Initialize multiple buttons
					$(".selector").igDatePicker({
						buttonType : "dropdown,clear"
					});
				 
```
centuryThreshold
Inherited

Type:

number

Default:

29
Gets/Sets year for auto detection of 20th and 21st centuries.
That option is used to automatically fill century when the user entered only 1 or 2 digits into the year field or when the date pattern contains only 1 or 2 year positions, e.g. "yy" or "y".
If user entered value larger than value of this option, then 20th century is used, otherwise the 21st.
Code Sample
```
 
					//Initialize
					$(".selector").igDatePicker({
						centuryThreshold: 35
					});

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

					//Set
					$(".selector").igDatePicker("option", "centuryThreshold", 35);
				 
```
dataMode
Inherited

Type:

enumeration

Default:

date
Gets the value type returned by the get of value() method and option. Also affects how the value is stored for form submit. The enableUTCDates option can be used to output an UTC ISO string instead.
For example 10:00 AM from a client with local offset of 5 hours ahead of GMT will be serialized as:
"2016-11-11T10:00:00+05:00".
Members
- date
- Type:string
- The value method returns a Date object. When this mode is set the value sent to the server on submit is serialized as ISO 8061 string with local time and zone values by default.
- displayModeText
- Type:string
- The "text" in display mode (no focus) format (pattern) is used to be send to the server and is returned from the value() method (returns a string object).
- editModeText
- Type:string
- The "text" in edit mode (focus) format (pattern) is used to be send to the server and is returned from the value() method (returns a string object).
Code Sample
```
 
				//Initialize
				$(".selector").igDatePicker({
					dataMode: "editModeText"
				});
				//Get
				var dataMode = $(".selector").igDatePicker("option", "dataMode");
			 
```
dateDisplayFormat
Inherited

Type:

string

Default:

null
Gets/Sets format of date while editor has no focus.
Value of that option can be set to a specific date pattern or to a flag defined by regional settings.
If value is not set, then the dateInputFormat is used automatically.
If value is set to explicit date pattern and pattern besides date-flags has explicit characters which match with date-flags or mask-flags, then the "escape" character should be used in front of them.
List of predefined regional flags:
"date": the datePattern member of regional option is used
"dateLong": the dateLongPattern member of regional option is used
"time": the timePattern member of regional option is used
"timeLong": the timeLongPattern member of regional option is used
"dateTime": the dateTimePattern member of regional option is used
List of explicit characters, which should have escape \\ character in front of them:
C, &, a, A, ?, L, 9, 0, #, >, <, y, M, d, h, H, m, s, t, f.
List of date-flags when explicit date pattern is used:
"y": year field without century and without leading zero
"yy": year field without century and with leading zero
"yyyy": year field with leading zeros
"M": month field as digit without leading zero
"MM": month field as digit with leading zero
"MMM": month field as short month name
"MMMM": month field as long month name
"d": day of month field without leading zero
"dd": day of month field with leading zero
"ddd": day of the week as short name
"dddd": day of the week as long name
"t": first character of string which represents AM/PM field
"tt": 2 characters of string which represents AM/PM field
"h": hours field in 12-hours format without leading zero
"hh": hours field in 12-hours format with leading zero
"H": hours field in 24-hours format without leading zero
"HH": hours field in 24-hours format with leading zero
"m": minutes field without leading zero
"mm": minutes field with leading zero
"s": seconds field without leading zero
"ss": seconds field with leading zero
"f": milliseconds field in hundreds
"ff": milliseconds field in tenths
"fff": milliseconds field.
Code Sample
```
 
					//Initialize
					$(".selector").igDatePicker({
						dateDisplayFormat: "dateLong"
					});

					//Get
					var dateDisplayFormat = $(".selector").igDatePicker("option", "dateDisplayFormat");

					//Set
					$(".selector").igDatePicker("option", "dateDisplayFormat", "dateLong");
				 
```
dateInputFormat
Inherited

Type:

string

Default:

null
Gets format of date while editor has focus.
Value of that option can be set to explicit date pattern or to a flag defined by regional settings.
If value is set to explicit date pattern and pattern besides date-flags has explicit characters which match with date-flags or mask-flags, then the "escape" character should be used in front of them.
If option is not set, then the "date" is used automatically.
List of predefined regional flags:
"date": the datePattern member of regional option is used
"dateLong": the dateLongPattern member of regional option is used
"time": the timePattern member of regional option is used
"timeLong": the timeLongPattern member of regional option is used
"dateTime": the dateTimePattern member of regional option is used
List of explicit characters, which should have escape \\ character in front of them: C, &, a, A, ?, L, 9, 0, #, >, <, y, M, d, h, H, m, s, t, f.
List of date-flags when explicit date pattern is used:
"yy": year field without century and with leading zero
"yyyy": year field with leading zeros
"MM": month field as digit with leading zero
"dd": day of month field with leading zero
"t": first character of string which represents AM/PM field
"tt": 2 characters of string which represents AM/PM field
"hh": hours field in 12-hours format with leading zero
"HH": hours field in 24-hours format with leading zero
"mm": minutes field with leading zero
"ss": seconds field with leading zero
"f": milliseconds field in hundreds
"ff": milliseconds field in tenths
"fff": milliseconds field
Note! This option can not be set runtime.
Code Sample
```
 
					//Initialize
					$(".selector").igDatePicker({
						dateInputFormat : "dateLong"
					});

					//Get
					var dateInputFormat = $(".selector").igDatePicker("option", "dateInputFormat");
				 
```

datepickerOptions

Type:: object
Default:: null

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

Code Sample

 
			//Initialize
			$(".selector").igDatePicker({
				datepickerOptions: {minDate : new Date(2015, 9, 17), maxDate : new Date(2015, 9, 30)}
			});

			//Get
			var datepickerOptions = $(".selector").igDatePicker("option", "datepickerOptions");

			//Set
			$(".selector").igDatePicker("option", "datepickerOptions", {minDate : new Date(2017, 9, 11), maxDate : new Date(2017, 9, 22)});

disabled
Inherited

Type:

bool

Default:

false
Gets/Sets the disabled attribute for the input. If set to true the input is disabled, and all buttons and interactions are disabled. On submitting the form the editor belongs to, the value is not submitted.
Code Sample
```
 
				//Initialize
				$(".selector").igDatePicker({
					disabled : false
				});

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

				//Set
				$(".selector").igDatePicker("option", "disabled", true);
			 
```
displayTimeOffset
Inherited

Type:

object

Default:

null
Gets/Sets time zone offset from UTC, in minutes. The client date values are displayed with this offset instead of the local one.
Note: It is recommended that this option is used with an UTC value (e.g. "2016-11-03T14:08:08.504Z") so the outcome is consistent.
Values with ambiguous time zone could map to unpredictable times depending on the user agent local zone.
Code Sample
```
 
				//Initialize
				$(".selector").igDatePicker({
					displayTimeOffset: 180
				});

				//Get
				var displayTimeOffset = $(".selector").igDatePicker("option", "displayTimeOffset");
			 
```
dropDownOnReadOnly

Type:

bool

Default:

false
Gets the ability to limit igDatePicker to be used only as s calendar. When set to true the editor input is not editable.
Note! This option can not be set runtime.
Code Sample
```
 
				//Initialize
				$(".selector").igDatePicker({
					dropDownOnReadOnly : true
				});

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

enableUTCDates
Inherited

Type:: bool
Default:: false

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

Code Sample

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

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

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

excludeKeys
Inherited

Type:

string

Default:

null
Gets ability to prevent entering specific characters from keyboard or on paste.
Notes:
If a character is specified in "includeKeys" option also, then "excludeKeys" has priority.
Note! This option can not be se runtime.
Code Sample
```
 
				//Initialize
				$(".selector").igDatePicker({
					excludeKeys: "ABC"
				});

				//Get
				var excludedKeys= $(".selector").igDatePicker("option", "excludeKeys");
				 
```
height
Inherited

Type:

enumeration

Default:

null
Gets/Sets the height of the control.
Members
- null
- Type:object
- will fit the editor inside its parent container, if no other heights are defined.
- string
- The height can be set in pixels (px) and percentage (%).
- number
- The height can be set as a number in pixels.
Code Sample
```
 
				//Initialize
				$(".selector").igDatePicker({
					height : 25
				});
				//Get
				var height = $(".selector").igDatePicker("option", "height");
				//Set
				$(".selector").igDatePicker("option", "height", 25);
				 
```
includeKeys
Inherited

Type:

string

Default:

null
Gets ability to enter only specific characters in input-field from keyboard and on paste.
Notes:
If "excludeKeys" option contains same characters as this option, then "excludeKeys" has priority.
Note! This option can not be se runtime.
Code Sample
```
 
				//Initialize
				$(".selector").igDatePicker({
					includeKeys: "ABC"
				});

				//Get
				var includedKeys= $(".selector").igDatePicker("option", "includeKeys");
				 
```
inputName
Inherited

Type:

string

Default:

null
Gets/Sets the name attribute of the value input. This input is used to sent the value to the server. In case the target element is input and it has name attribute, but the developer has set the inputName option, so this option overwrites the value input and removes the attribute from the element.
Code Sample
```
 
			//Initialize
				$(".selector").igDatePicker({
				  inputName : "textField"
				});

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

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

limitSpinToCurrentField
Inherited

Type:: bool
Default:: false

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

Code Sample

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

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

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

locale
Inherited

Type:

object

Default:

null
Gets/Sets the strings used for the localization of the component. This includes button titles, error messages etc. Value of the 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: {
							spinUpperTitle: 'SpinUp'
					}
				});

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

				//Set
				$(".selector").igDatePicker("option", "locale", {spinUpperTitle: 'SpinUp'});
			 
```
maxValue
Inherited

Type:

date

Default:

null
Gets the maximum value which can be entered in editor by user. Date object can be set as value. String value can be passed and the editor will use the javascript Date object constructor to create date object and will use it for the comparison. MVC date format can be used too.
Note! This option doesn't use the dateInputFormat to extract the date.
Code Sample
```
 
					//Initialize
					$(".selector").igDatePicker({
						maxValue: new Date(2020, 11, 21)
					});

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

					//Set
					$(".selector").igDatePicker("option", "maxValue", new Date(2020, 11, 21));
				 
```
minValue
Inherited

Type:

date

Default:

null
Gets the minimum value which can be entered in editor by user. Date object can be set as value. String value can be passed and the editor will use the javascript Date object constructor to create date object and will use it for the comparison. MVC date format can be used too.
Note! This option doesn't use the dateInputFormat to extract the date.
Code Sample
```
 
					//Initialize
					$(".selector").igDatePicker({
						minValue: new Date(1980, 6, 1)
					});

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

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

nullValue
Inherited

Type:: enumeration
Default:: null

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

Code Sample

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

placeHolder
Inherited

Type:: string
Default:: null

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

Code Sample

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

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

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

preventSubmitOnEnter
Inherited

Type:: bool
Default:: false

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

Code Sample

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

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

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

readOnly
Inherited

Type:

bool

Default:

false
Gets/Sets the readonly attribute for the input. If set to true the input is readonly, and all buttons and interactions are disabled. On submitting the form the editor belongs to, the value is submitted.
Code Sample
```
 
				//Initialize
				$(".selector").igDatePicker({
					readOnly : true
				});

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

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

regional

Type:: object
Default:: null

Gets/Sets the custom regional settings for the editor. If it is a string, then $.ig.regional[stringValue] is assumed.

Code Sample

 
			//Initialize
				$(".selector").igDatePicker({
					regional: "en-US"
				});

				//Get
				var regional = $(".selector").igDatePicker("option", "regional");

				//Set
				$(".selector").igDatePicker("option", "regional", "en-US");

revertIfNotValid
Inherited

Type:: bool
Default:: true

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

Code Sample

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

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

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

selectionOnFocus
Inherited

Type:

enumeration

Default:

selectAll
Gets/Sets the action when the editor gets focused. The default value is selectAll.
Members
- selectAll
- Type:string
- Setting this option will select all the text into the editor when the edit mode gets enetered.
- atStart
- Type:string
- Setting this option will move the cursor at the begining the text into the editor when the edit mode gets enetered.
- atEnd
- Type:string
- Setting this option will move the cursor at the end the text into the editor when the edit mode gets enetered.
- browserDefault
- Type:string
- Setting this option won't do any extra logic, but proceed with the browser default behavior.
Code Sample
```
 
					//Initialize
					$(".selector").igDatePicker({
						selectionOnFocus: "atStart"
					});
					//Get
					var selectionOnFocus= $(".selector").igDatePicker("option", "selectionOnFocus");
					//Set
					$(".selector").igDatePicker("option", "selectionOnFocus", "selectAll");
					 
```
spinDelta
Inherited

Type:

number

Default:

1
Gets/Sets delta-value which is used to increment or decrement the editor date on spin actions.
When not editing (focused) the delta is applied on the day if available in the input mask or the lowest available period.
When in edit mode the time period, where the cursor is positioned, is incremented or decremented with the defined delta value.
The value can be only a positive integer number, otherwise it will be set as 1, or in the cases with double or float the the whole part will be taken.
Code Sample
```
 
				//Initialize
				$(".selector").igDatePicker({
					spinDelta: 10
				});

				//Get
				var spinDelta= $(".selector").igDatePicker("option", "spinDelta");

				//Set
				$(".selector").igDatePicker("option", "spinDelta", 10);
			 
```

suppressNotifications
Inherited

Type:: bool
Default:: false

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

Code Sample

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

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

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

tabIndex
Inherited

Type:: number
Default:: null

Gets/Sets tabIndex attribute for the editor input.

Code Sample

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

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

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

textAlign
Inherited

Type:

enumeration

Default:

left
Gets/Sets the horizontal alignment of the text in the editor.
Members
- left
- Type:string
- The text into the input gets aligned to the left.
- right
- Type:string
- The text into the input gets aligned to the right.
- center
- Type:string
- The text into the input gets aligned to the center.
Code Sample
```
 
					//Initialize
					$(".selector").igDatePicker({
						textAlign : "center"
					});
					//Get
					var align = $(".selector").igDatePicker("option", "textAlign");
					//Set
					$(".selector").igDatePicker("option", "textAlign", "center");
					 
```

validatorOptions
Inherited

Type:: object
Default:: null

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

Code Sample

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

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

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

value
Inherited

Type:

date

Default:

null
Gets/Sets the value of the editor. Date object can be set as value. String can be set and the editor will pass it to the Date object constructor and use the corresponding Date object as the value. MVC date format can be used too.
Note! This option doesn't use the dateInputFormat to extract the date.
Code Sample
```
 
				//Initialize
				$(".selector").igDatePicker({
					value : new Date (2015, 11, 11)
				});

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

				//Set
				$(".selector").igDatePicker("option", "value", new Date (2015, 11, 11));
				 
```
width
Inherited

Type:

enumeration

Default:

null
Gets/Sets the width of the control.
Members
- null
- Type:object
- will stretch to fit data, if no other widths are defined.
- string
- The widget width can be set in pixels (px) and percentage (%).
- number
- The widget width can be set as a number in pixels.
Code Sample
```
 
				//Initialize
				$(".selector").igDatePicker({
					width : 200
				});
				//Get
				var width = $(".selector").igDatePicker("option", "width");
				//Set
				$(".selector").igDatePicker("option", "width", 200);
				 
```

yearShift
Inherited

Type:: number
Default:: 0

Gets/Set value used to increase/decrease year part of the date, in order to set 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

blur
Inherited

Cancellable:

false

Event which is raised when input field of editor loses focus.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igdatepickerblur", function (evt, ui) {
					...
				});

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

Cancellable:

false

Event which is raised after the drop down (calendar) is closed.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.calendar to obtain a reference to jQuery UI date picker widget, used as a calendar from the igDatePicker.
Code Sample
```
 
				$(".selector").on("igdatepickerdropdownlistclosed", function (evt, ui) {
					...
				});

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

Cancellable:

false

Event which is raised after the drop down is opened.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.calendar to obtain a reference to jQuery UI date picker widget, used as a calendar from the igDatePicker.
Code Sample
```
 
				$(".selector").on("igdatepickerdropdownlistopened", function (evt, ui) {
					...
				});

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

Cancellable:

true

Event which is raised when the drop down is opening.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.calendar to obtain a reference to jQuery UI date picker widget, used as a calendar from the igDatePicker.
Code Sample
```
 
				$(".selector").on("igdatepickerdropdownlistopening", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					dropDownListOpening: function (evt, ui) {
					...
					}
				});
				 
```
focus
Inherited

Cancellable:

false

Event which is raised when input field of editor gets focus.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igdatepickerfocus", function (evt, ui) {
					...
				});

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

Cancellable:

false

Event which is raised after a date selection in the calendar.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.dateFromPicker to obtain reference to the date object which is selected.
Use ui.item to obtain a referece to the selected html element from the calendar.
Use ui.calendar to obtain a reference to jQuery UI date picker, used as a calendar from the igDatePicker.
Code Sample
```
 
				$(".selector").on("igdatepickeritemselected", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					itemSelected: function (evt, ui) {
					...
					}
				});
				 
```
keydown
Inherited

Cancellable:

true

Event which is raised on keydown event.
Return false in order to cancel key action.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.
Code Sample
```
 
				$(".selector").on("igdatepickerkeydown", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					keydown: function (evt, ui) {
						...
					}
				});
				 
```
keypress
Inherited

Cancellable:

true

Event which is raised on keypress event.
Return false in order to cancel key action.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.
Code Sample
```
 
				$(".selector").on("igdatepickerkeypress", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					keypress: function (evt, ui) {
						...
					}
				});
				 
```
keyup
Inherited

Cancellable:

false

Event which is raised on keyup event.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.
Code Sample
```
 
				$(".selector").on("igdatepickerkeyup", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					keyup: function (evt, ui) {
						...
					}
				});
				 
```
mousedown
Inherited

Cancellable:

false

Event which is raised on mousedown event.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igdatepickermousedown", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					mousedown: function (evt, ui) {
						...
					}
				});
				 
```
mousemove
Inherited

Cancellable:

false

Event which is raised on mousemove at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igdatepickermousemove", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					mousemove: function (evt, ui) {
						...
					}
				});
				 
```
mouseout
Inherited

Cancellable:

false

Event which is raised on mouseleave at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igdatepickermouseout", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					mouseout: function (evt, ui) {
						...
					}
				});
				 
```
mouseover
Inherited

Cancellable:

false

Event which is raised on mouseover at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igdatepickermouseover", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					mouseover: function (evt, ui) {
						...
					}
				});
				 
```
mouseup
Inherited

Cancellable:

false

Event which is raised on mouseup event.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igdatepickermouseup", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					mouseup: function (evt, ui) {
						...
					}
				});
				 
```
rendered
Inherited

Cancellable:

false

Event which is raised after rendering of the editor completes.
Function takes arguments evt and ui.
Use ui.owner to get a reference to the editor performing rendering.
Use ui.element to get a reference to the editor element.
Code Sample
```
 
				$(".selector").on("igdatepickerrendered", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					rendered: function (evt, ui) {
						...
					}
				});
				 
```
rendering
Inherited

Cancellable:

false

Event which is raised before rendering of the editor completes.
Function takes arguments evt and ui.
Use ui.owner to get a reference to the editor performing rendering.
Use ui.element to get a reference to the editor element.
Code Sample
```
 
				$(".selector").on("igdatepickerrendering", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					rendering: function (evt, ui) {
						...
					}
				});
				 
```
textChanged
Inherited

Cancellable:

false

Event which is raised after text in the editor was changed. It can be raised when keyUp event occurs,
when the clear button is clicked or when an item from a list is selected.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.text to obtain new text
Use ui.oldText to obtain the old text.
Code Sample
```
 
				$(".selector").on("igdatepickertextchanged", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					textChanged: function (evt, ui) {
					...
					}
				});
				 
```
valueChanged
Inherited

Cancellable:

false

Event which is raised after the editor value is changed. It can be raised after loosing focus or on spin events.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.newValue to obtain the new value.
Use ui.originalValue to obtain the original value.
Use ui.editorInput to obtain reference to the editor input.
Code Sample
```
 
				$(".selector").on("igdatepickervaluechanged", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igDatePicker({
					valueChanged: function (evt, ui) {
						...
					}
				});
				 
```
valueChanging
Inherited

Cancellable:

true

Event which is raised before the editor value is changed.
Return false in order to cancel change.
It can be raised after loosing focus or on spin events.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.newValue to obtain the new value.
Use ui.oldValue to obtain the old value.
Use ui.editorInput to obtain reference to the editor input.
Code Sample
```
 
				$(".selector").on("igdatepickervaluechanging", function (evt, ui) {
					...
				});

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

Show Details

clearButton
Inherited

.igDatePicker( "clearButton" );

Return Type:

jquery

Return Type Description:

Returns a reference to the jquery object.
Returns a reference to the clear button UI element of the editor.
Code Sample
```
 
			var button =  $(".selector").igDatePicker("clearButton");
			 
```
destroy

.igDatePicker( "destroy" );
Destroys the widget.
Code Sample
```
 
			$(".selector").igDatePicker("destroy");
			 
```
displayValue
Inherited

.igDatePicker( "displayValue" );

Return Type:

string

Return Type Description:

Visible text of the editor.
Gets the visible text in the editor.
Code Sample
```
  $(".selector").igDatePicker("displayValue");  
```
dropDownButton

.igDatePicker( "dropDownButton" );

Return Type:

jquery

Return Type Description:

Returns reference to jquery object.
Returns a reference to the calendar button UI element of the editor.
Code Sample
```
 
			var button = $(".selector").igDatePicker("dropDownButton");
			 
```
dropDownVisible

.igDatePicker( "dropDownVisible" );

Return Type:

bool

Return Type Description:

The visibility state of the calendar.
Returns the visibility state of the calendar.
Code Sample
```
 
			$(".selector").igDatePicker("dropDownVisible");
			 
```
editorContainer
Inherited

.igDatePicker( "editorContainer" );

Return Type:

jquery

Return Type Description:

The container editor element.
Gets a reference to the jQuery element that wraps the editor.
Code Sample
```
 
			$(".selector").igDatePicker("editorContainer");
			 
```
field
Inherited

.igDatePicker( "field" );

Return Type:

jquery

Return Type Description:

The visual editor element.
Gets the input element of the editor.
Code Sample
```
 
			$(".selector").igDatePicker("field");
			 
```
getCalendar

.igDatePicker( "getCalendar" );

Return Type:

jquery

Return Type Description:

Returns a reference to the jquery object.
Returns a reference to the jQuery calendar used as a picker selector.
Code Sample
```
 
			$(".selector").igDatePicker("getCalendar");
			 
```
getSelectedDate
Inherited

.igDatePicker( "getSelectedDate" );

Return Type:

date
Gets selected date as a date object. This method can be used when dataMode is set as either displayModeText or editModeText.
In such cases the value() method will not return date object and getSelectedDate() can be used to replace that functionality.
Code Sample
```
 
			$(".selector").igDatePicker("getSelectedDate");
			 
```
getSelectedText
Inherited

.igDatePicker( "getSelectedText" );

Return Type:

string

Return Type Description:

Selected text in editor.
Gets the selected text from the editor in edit mode. This can be done inside key event handlers, like keydown or keyup. This method can be used only when the editor is focused. If you invoke this method in display mode, when the editor input is blurred, the returned value will be an empty string.
Code Sample
```
 
			var text =  (".selector").igDatePicker("getSelectedText");
			 
```
getSelectionEnd
Inherited

.igDatePicker( "getSelectionEnd" );

Return Type:

number

Return Type Description:

End index of the selected text in the editor.
Gets the end index of the selected text in the editor.
Code Sample
```
 
			var intex = $(".selector").igDatePicker("getSelectionEnd");
			 
```
getSelectionStart
Inherited

.igDatePicker( "getSelectionStart" );

Return Type:

number

Return Type Description:

Start index of the selected text in the editor.
Gets the start index of the selected text in the editor.
Code Sample
```
 
			var intex = $(".selector").igDatePicker("getSelectionStart");
			 
```
hasFocus
Inherited

.igDatePicker( "hasFocus" );

Return Type:

bool

Return Type Description:

Returns if the editor is focused or not.
Gets whether the editor has focus.
Code Sample
```
 
				$(".selector").igDatePicker("hasFocus");
			 
```
hide
Inherited

.igDatePicker( "hide" );
Hides the editor.
Code Sample
```
 
			$(".selector").igDatePicker("hide");
			 
```
hideDropDown

.igDatePicker( "hideDropDown" );
Hides the drop down list.
Code Sample
```
 
			$(".selector").igDatePicker("hideDropDown");
			 
```
inputName
Inherited

.igDatePicker( "inputName", [newValue:string] );

Return Type:

string

Return Type Description:

Current input name.
Gets/Sets name attribute applied to the editor element.
- newValue
- Type:string
- Optional
- The new input name.
Code Sample
```
 
				$(".selector").igDatePicker("inputName", "checkbox");
				 
```
insert
Inherited

.igDatePicker( "insert", string:string );
Inserts the text at the location of the caret or over the current selection. If the editor is focused the method will insert the text over the current selection. If the editor is not focused the method will set the text as value of the editor.
Note: The method raises textChanged event.
- string
- Type:string
- The string to be inserted.
Code Sample
```
 
				$('.selector').igDatePicker({
					blur: function (evt, ui) {
						// insert 0 as the user leaves the field
						ui.owner.insert("0");
					}
				});
				$(".selector").igDatePicker("insert", "20");
				 
```
isValid
Inherited

.igDatePicker( "isValid" );

Return Type:

bool

Return Type Description:

Whether editor value is valid or not.
Checks if the value in the editor is valid. Note: This function will not trigger automatic notifications.
Code Sample
```
 
				var isValid = $(".selector").igDatePicker("isValid");
			 
```
select
Inherited

.igDatePicker( "select", start:number, end:number );
Selects the text between start and end indices in the editor. If the parameters are equal, then the method sets location of caret. The method has effect only when the editor has focus.
- start
- Type:number
- Start of the selection.
- end
- Type:number
- End of the selection.
Code Sample
```
 
				$(".selector").igDatePicker("select", 2, 4);
			 
```
selectDate
Inherited

.igDatePicker( "selectDate", date:date );
Sets selected date. This method can be used when dataMode is set as either displayModeText or editModeText.
In such cases the value() cannot accept a date object as a new value and getSelectedDate() can be used to replace that functionality.
- date
- Type:date
- .
Code Sample
```
 
				$(".selector").igDatePicker("selectDate", new Date (2016, 2, 3));
			 
```
setFocus
Inherited

.igDatePicker( "setFocus", [delay:number] );
Sets focus to the editor after the specified delay.
- delay
- Type:number
- Optional
- The delay before focusing the editor.
Code Sample
```
 
				$(".selector").igDatePicker("setFocus", 200);
				 
```
show
Inherited

.igDatePicker( "show" );
Shows the editor.
Code Sample
```
 
			$(".selector").igDatePicker(("show");
			 
```
showDropDown

.igDatePicker( "showDropDown" );
Shows the drop down list.
Code Sample
```
 
			$(".selector").igDatePicker("showDropDown");
			 
```
spinDown
Inherited

.igDatePicker( "spinDown", [delta:number] );
Decreases the date or time period, depending on the current cursor position.
- delta
- Type:number
- Optional
- The decrease delta.
Code Sample
```
 
				$(".selector").igDatePicker("spinDown", 3);
			 
```
spinDownButton
Inherited

.igDatePicker( "spinDownButton" );

Return Type:

jquery

Return Type Description:

The jQuery object representing the spin down UI element of the editor.
Returns a reference to the spin down UI element of the editor.
Code Sample
```
 
				$(".selector").igDatePicker("spinDownButton");
			 
```
spinUp
Inherited

.igDatePicker( "spinUp", [delta:number] );
Increases the date or time period, depending on the current cursor position.
- delta
- Type:number
- Optional
- The increase delta.
Code Sample
```
 
				$(".selector").igDatePicker("spinUp", 2);
			 
```
spinUpButton
Inherited

.igDatePicker( "spinUpButton" );

Return Type:

jquery

Return Type Description:

The jQuery object representing the spin up UI element of the editor.
Returns a reference to the spin up UI element of the editor.
Code Sample
```
 
			$(".selector").igDatePicker("spinUpButton");
			 
```
validate
Inherited

.igDatePicker( "validate" );

Return Type:

bool

Return Type Description:

Whether editor value is valid or not.
Triggers validation for the editor. If validatorOptions are set will also call validate on the igValidator.
Code Sample
```
 
				var valid = $(".selector").igDatePicker("validate");
				 
```
validator
Inherited

.igDatePicker( "validator" );

Return Type:

object

Return Type Description:

Returns reference to igValidator or null.
Gets a reference to igValidator used by the editor.
Code Sample
```
 
					var validator = $(".selector").igDatePicker("validator");
				 
```
value
Inherited

.igDatePicker( "value", [newValue:date] );

Return Type:

date

Return Type Description:

Current editor value.
Gets/Sets editor value.

Note! This option doesn't use the dateInputFormat to extract the date.
- newValue
- Type:date
- Optional
- New editor value. Date object can be set as value. String value can be passed and the editor will use the javascript Date object constructor to create date object and will use it for the comparison. MVC date format can be used too. For example Date(/"thicks"/).
Code Sample
```
 
				$(".selector").igDatePicker("value", new Date (2016, 2, 3);
			 
```

ui-state-active

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

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

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

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

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

Class applied to the div holding the clear button image. Default value is 'ui-igedit-buttonimage ui-icon-circle-close ui-icon ui-igedit-buttondefault'.
ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ignite UI | Samples

ui.igDatePicker

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

allowNullValueInherited

Code Sample

buttonType

Members

Code Sample

centuryThresholdInherited

Code Sample

dataModeInherited

Members

Code Sample

dateDisplayFormatInherited

Code Sample

dateInputFormatInherited

Code Sample

datepickerOptions

Code Sample

disabledInherited

Code Sample

displayTimeOffsetInherited

Code Sample

dropDownOnReadOnly

Code Sample

enableUTCDatesInherited

Code Sample

excludeKeysInherited

Code Sample

heightInherited

Members

Code Sample

includeKeysInherited

Code Sample

inputNameInherited

Code Sample

limitSpinToCurrentFieldInherited

Code Sample

localeInherited

Code Sample

maxValueInherited

Code Sample

minValueInherited

Code Sample

nullValueInherited

Code Sample

placeHolderInherited

Code Sample

preventSubmitOnEnterInherited

Code Sample

readOnlyInherited

Code Sample

regional

Code Sample

revertIfNotValidInherited

Code Sample

selectionOnFocusInherited

Members

Code Sample

spinDeltaInherited

Code Sample

suppressNotificationsInherited

Code Sample

tabIndexInherited

Code Sample

textAlignInherited

Members

Code Sample

validatorOptionsInherited

Code Sample

valueInherited

Code Sample

widthInherited

Members

Code Sample

yearShiftInherited

allowNullValue
Inherited

centuryThreshold
Inherited

dataMode
Inherited

dateDisplayFormat
Inherited

dateInputFormat
Inherited

disabled
Inherited

displayTimeOffset
Inherited

enableUTCDates
Inherited

excludeKeys
Inherited

height
Inherited

includeKeys
Inherited

inputName
Inherited

limitSpinToCurrentField
Inherited

locale
Inherited

maxValue
Inherited

minValue
Inherited

nullValue
Inherited

placeHolder
Inherited

preventSubmitOnEnter
Inherited

readOnly
Inherited

revertIfNotValid
Inherited

selectionOnFocus
Inherited

spinDelta
Inherited

suppressNotifications
Inherited

tabIndex
Inherited

textAlign
Inherited

validatorOptions
Inherited

value
Inherited

width
Inherited

yearShift
Inherited

blur
Inherited

focus
Inherited

keydown
Inherited

keypress
Inherited

keyup
Inherited

mousedown
Inherited

mousemove
Inherited

mouseout
Inherited

mouseover
Inherited

mouseup
Inherited

rendered
Inherited

rendering
Inherited

textChanged
Inherited

valueChanged
Inherited

valueChanging
Inherited

clearButton
Inherited

displayValue
Inherited

editorContainer
Inherited

field
Inherited

getSelectedDate
Inherited

getSelectedText
Inherited

getSelectionEnd
Inherited

getSelectionStart
Inherited

hasFocus
Inherited

hide
Inherited

inputName
Inherited