## Properties

Name | Type | Default
--- | --- | ---
value | jqxDateTime | By default, the control displays the Today's date which is set by using the following syntax: $.jqx._jqxDateTimeInput.getDateTime(new Date());
Sets the jqxDateTimeInput value. #### Code example Initialize a DateTimeInput with the `value` property specified.
    $('#DateTimeInput').jqxDateTimeInput({ value: new $.jqx._jqxDateTimeInput.getDateTime(new Date(2000, 0, 1)) });
minDate | Date | 1900, 1, 1
Sets the jqxDateTimeInput's minumun value. #### Code example Initialize a DateTimeinput with the `minDate` property specified.
    $('#DateTimeInput').jqxDateTimeInput({ minDate: new $.jqx._jqxDateTimeInput.getDateTime(new Date(2000, 0, 1)) });
maxDate | Date | 2100, 1, 1
Sets the jqxDateTimeInput's maximum value. #### Code example Initialize a DateTimeinput with the `maxDate` property specified.
    $('#DateTimeInput').jqxDateTimeInput({ maxDate: new $.jqx._jqxDateTimeInput.getDateTime(new Date(2013, 0, 1)) });
formatString | String | dd/MM/yyyy
Gets ot sets the date time input format of the date. Possible values: // short date pattern "d" - "M/d/yyyy", // long date pattern "D" - "dddd, MMMM dd, yyyy", // short time pattern "t" - "h:mm tt", // long time pattern "T" - "h:mm:ss tt", // long date, short time pattern "f" - "dddd, MMMM dd, yyyy h:mm tt", // long date, long time pattern "F" - "dddd, MMMM dd, yyyy h:mm:ss tt", // month/day pattern "M" - "MMMM dd", // month/year pattern "Y" - "yyyy MMMM", // S is a sortable format that does not vary by culture "S" - "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss" "d"-the day of the month; "dd"-the day of the month; "ddd"-the abbreviated name of the day of the week; "dddd"- the full name of the day of the week; "h"-the hour, using a 12-hour clock from 1 to 12; "hh"-the hour, using a 12-hour clock from 01 to 12; "H"-the hour, using a 24-hour clock from 0 to 23; "HH"- the hour, using a 24-hour clock from 00 to 23; "m"-the minute, from 0 through 59; "mm"-the minutes,from 00 though59; "M"- the month, from 1 through 12; "MM"- the month, from 01 through 12; "MMM"-the abbreviated name of the month; "MMMM"-the full name of the month; "s"-the second, from 0 through 59; "ss"-the second, from 00 through 59; "t"- the first character of the AM/PM designator; "tt"-the AM/PM designator; "y"- the year, from 0 to 99; "yy"- the year, from 00 to 99; "yyy"-the year, with a minimum of three digits; "yyyy"-the year as a four-digit number; "yyyyy"-the year as a four-digit number. #### Code example Initialize a DateTimeinput with the `formatString` property specified.
    $('#DateTimeInput').jqxDateTimeInput({ formatString: "dd"});
width | Number/String | null
Sets the width of the jqxDateTimeInput widget. #### Code example Initialize a DateTimeinput with the `width` property specified.
    $('#DateTimeInput').jqxDateTimeInput({ width: '250px', height: '25px'});
height | Number/String | null
Sets the height of the jqxDateTimeInput widget. #### Code example Initialize a DateTimeinput with the `height` property specified.
    $('#DateTimeInput').jqxDateTimeInput({ width: '250px', height: '25px'});
firstDayOfWeek | Number | 0
Sets which day to display in the first day column. By default the calendar displays 'Sunday' as first day. #### Code example Initialize a jqxDateTimeInput with the `firstDayOfWeek` property specified.
    $('#jqxDateTimeInput').jqxDateTimeInput({ firstDayOfWeek: 1 });
showWeekNumbers | Boolean | true
Sets a value whether the week`s numbers are displayed. #### Code example Initialize a jqxDateTimeInput with the `showWeekNumbers` property specified.
    $('#jqxDateTimeInput').jqxDateTimeInput({ showWeekNumbers: false });
textAlign | String | left
Sets the position of the text. #### Code example Initialize a DateTimeinput with the `textAlign` property specified.
    $('#DateTimeInput').jqxDateTimeInput({ textAlign: "left"});
readonly | Boolean | false
#### Code example Initialize a DateTimeinput with the `readonly` property specified.
    $('#DateTimeInput').jqxDateTimeInput({ readonly: true});
showFooter | Boolean | false
Sets a value indicating whether the dropdown calendar's footer is displayed. #### Code example Initialize a jqxDateTimeInput with the `showFooter` property specified.
    $('#Calendar').jqxDateTimeInput({ showFooter: true });
selectionMode | Boolean | 'default'
Sets the dropdown calendar's selection mode. The possible values are: 'none', 'default' and 'range'. #### Code example Initialize a jqxDateTimeInput with the `selectionMode` property specified.
    $('#Calendar').jqxDateTimeInput({ selectionMode: true });
todayString | Boolean | 'Today'
Sets the 'Today' string displayed in the dropdown Calendar when the 'showFooter' property is true. #### Code example Initialize a jqxDateTimeInput with the `todayString` property specified.
    $('#Calendar').jqxDateTimeInput({ todayString: 'Today' });
clearString | Boolean | 'Clear'
Sets the 'Clear' string displayed when the 'showFooter' property is true. #### Code example Initialize a jqxDateTimeInput with the `clearString` property specified.
    $('#Calendar').jqxDateTimeInput({ clearString: 'Clear' });
culture | String | default
Sets the jqxDateTimeInput's culture. The culture settings are contained within a file with the language code appended to the name, e.g. jquery.glob.de-DE.js for German. To set the culture, you need to include the jquery.glob.de-DE.js and set the culture property to the culture's name, e.g. 'de-DE'. #### Code example Initialize a DateTimeinput with the `culture` property specified.
    $('#DateTimeInput').jqxDateTimeInput({culture: 'en-US' });
showDelay | Number | 350
Specifies the animation duration of the popup calendar when it is going to be displayed. #### Code example Initialize a DateTimeinput with the `showDelay` property specified.
    $('#DateTimeInput').jqxDateTimeInput({ showDelay: 200 });
hideDelay | Number | 400
Specifies the animation duration of the popup calendar when it is going to be hidden. #### Code example Initialize a DateTimeinput with the `hideDelay` property specified.
    $('#DateTimeInput').jqxDateTimeInput({ hideDelay: 200 });
closeCalendarAfterSelection | Boolean | true
Sets whether or not the popup calendar must be closed after selection. #### Code example Initialize a jqxDateTimeInput with the `closeCalendarAfterSelection` property specified.
    $('#DateTimeInput').jqxDateTimeInput({ closeCalendarAfterSelection:false});
enableBrowserBoundsDetection | Boolean | false
#### Code example Initialize a jqxDateTimeInput with the `enableBrowserBoundsDetection` property specified. When this property is set to true, the popup calendar may open above the input, if there's not enough space below the DateTimeInput.
    $('#DateTimeInput').jqxDateTimeInput({ enableBrowserBoundsDetection: false});
dropDownHorizontalAlignment | Boolean | 'left'
Sets the DropDown's alignment. Possible values: 'left' and 'right'. #### Code example
    $('#DateTimeInput').jqxDateTimeInput({ dropDownHorizontalAlignment: 'right'});
openDelay | Number | 350
Sets the delay of the 'open' animation. #### Code example Set the openDelay property
    $('#jqxDateTimeInput').jqxDateTimeInput({openDelay: 200});
closeDelay | Number | 400
Sets the delay of the 'close' animation. #### Code example Set the closeDelay property
    $('#jqxDateTimeInput').jqxDateTimeInput({closeDelay: 200});
animationType | String | 'slide'
Sets the type of the animation. Possible values: 'fade', 'slide' and 'none'. #### Code example Set the animationType property
    $('#jqxDateTimeInput').jqxDateTimeInput({animationType: 'none'});
enableAbsoluteSelection | Boolean | false
#### Code example Initialize a jqxDateTimeInput with the `enableAbsoluteSelection` property specified. This setting enables the user to select only one symbol at a time when typing into the text input field.
    $('#DateTimeInput').jqxDateTimeInput({ enableAbsoluteSelection: true });
## Events
valuechanged | Event |
This event is triggered when the value is changed. #### Code example Bind to the valuechanged event by type: jqxDateTimeInput.
    $('#DateTimeInput').bind('valuechanged', function (event) { // Some code here. });
textchanged | Event |
This event is triggered when the text is changed. #### Code example Bind to the textchanged event by type: jqxDateTimeInput.
    $('#DateTimeInput').bind('textchanged', function (event) { // Some code here.});
open | Event |
This event is triggered when the popup calendar is opened. #### Code example Bind to the open event by type: jqxDateTimeInput.
    $('#DateTimeInput').bind('open', function (event) { // Some code here. });
close | Event |
This event is triggered when the popup calendar is closed. #### Code example Bind to the close event by type: jqxDateTimeInput.
    $('#DateTimeInput').bind('close', function (event) { // Some code here. });
## Methods
setMinDate | Method |
When the setMinDate method is called, the user sets the minimum date to which it is possible to navigate. #### Code example Invoke the setMinDate method.
    $('#DateTimeInput ').jqxDateTimeInput('setMinDate', new Date(2008, 0, 1));
getMinDate | Method |
When the getMinDate method is called, the user gets the minimum navigation date. #### Code example Invoke the getMinDate method.
    var minDate = $('#DateTimeInput').jqxDateTimeInput('getMinDate');
setMaxDate | Method |
When the setMaxDate method is called, the user sets the maximum date to which it is possible to navigate. #### Code example Invoke the setMaxDate method.
    $('#DateTimeInput ').jqxDateTimeInput('setMaxDate', new Date(2013, 0, 1));
getMaxDate | Method |
When the setMaxDate method is called, the user gets the maximum navigation date. #### Code example Invoke the getMaxDate method.
    var getMaxDate= $('#DateTimeInput').jqxDateTimeInput('getMaxDate');
setDate | Method |
When the setDate method is called, the user sets the date. #### Code example Invoke the setDate method.
    $('#DateTimeInput ').jqxDateTimeInput('setDate', new Date(2008, 0, 1));
getDate | Method |
When the getDate method is called, the user gets the current date. #### Code example Invoke the getDate method.
    var getDate= $('#DateTimeInput').jqxDateTimeInput('getDate');
close | Method |
After calling this method, the popup calendar will be hidden. #### Code example Invoke the close method.
    $('#DateTimeInput').jqxDateTimeInput('close');
open | Method |
After calling this method, the popup calendar will be displayed. #### Code example Invoke the open method.
    $('#DateTimeInput').jqxDateTimeInput('open');
setRange | Method |
Sets the selection range when the selectionMode is set to 'range'. #### Code example Invoke the getDate method.
    var date1 = new Date();
    date1.setFullYear(2012, 7, 7);

    var date2 = new Date();
    date2.setFullYear(2012, 7, 15);
    $("#Calendar").jqxCalendar('setRange', date1, date2);
getRange | Method |
Gets the selection range when the selectionMode is set to 'range'. #### Code example Invoke the getDate method.
    var range = $("#Calendar").jqxCalendar('getRange');
    var from = range.from;
    var to = range.to;