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)) }); 

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)) });

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)) });

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"});

Sets the width of the jqxDateTimeInput widget.

Code example

Initialize a DateTimeinput with the width property specified.

$('#DateTimeInput').jqxDateTimeInput({ width: '250px', height: '25px'});

Sets the height of the jqxDateTimeInput widget.

Code example

Initialize a DateTimeinput with the height property specified.

$('#DateTimeInput').jqxDateTimeInput({ width: '250px', height: '25px'});

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 });

Sets a value whether the week`s numbers are displayed.

Code example

Initialize a jqxDateTimeInput with the showWeekNumbers property specified.

$('#jqxDateTimeInput').jqxDateTimeInput({ showWeekNumbers: false });

Sets the position of the text.

Code example

Initialize a DateTimeinput with the textAlign property specified.

$('#DateTimeInput').jqxDateTimeInput({ textAlign: "left"});

Code example

Initialize a DateTimeinput with the readonly property specified.

$('#DateTimeInput').jqxDateTimeInput({ readonly: true});

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 });

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 });

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' });

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' });

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' });

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 }); 

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 }); 

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}); 

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}); 

Sets the DropDown's alignment. Possible values: 'left' and 'right'.

Code example

$('#DateTimeInput').jqxDateTimeInput({ dropDownHorizontalAlignment: 'right'}); 

Sets the delay of the 'open' animation.

Code example

Set the openDelay property

$('#jqxDateTimeInput').jqxDateTimeInput({openDelay: 200});

                        

Sets the delay of the 'close' animation.

Code example

Set the closeDelay property

$('#jqxDateTimeInput').jqxDateTimeInput({closeDelay: 200});

                        

Sets the type of the animation. Possible values: 'fade', 'slide' and 'none'.

Code example

Set the animationType property

$('#jqxDateTimeInput').jqxDateTimeInput({animationType: 'none'});

                        

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 });

                        

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

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

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

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

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

                        

When the getMinDate method is called, the user gets the minimum navigation date.

Code example

Invoke the getMinDate method.

var minDate = $('#DateTimeInput').jqxDateTimeInput('getMinDate'); 

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

                        

When the setMaxDate method is called, the user gets the maximum navigation date.

Code example

Invoke the getMaxDate method.

var getMaxDate= $('#DateTimeInput').jqxDateTimeInput('getMaxDate'); 

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

When the getDate method is called, the user gets the current date.

Code example

Invoke the getDate method.

var getDate= $('#DateTimeInput').jqxDateTimeInput('getDate'); 

After calling this method, the popup calendar will be hidden.

Code example

Invoke the close method.

$('#DateTimeInput').jqxDateTimeInput('close'); 

After calling this method, the popup calendar will be displayed.

Code example

Invoke the open method.

$('#DateTimeInput').jqxDateTimeInput('open'); 

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

                        

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;