Sets or gets the type of the animation.

Possible Values:

'fade'

'slide'

'none'

Code example

Set the animationType property

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

Get the animationType property.

var animationType = $('#jqxDateTimeInput').jqxDateTimeInput('animationType'); 

Determines whether Null is allowed as a value.

Code example

Set the allowNullDate property.

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

Get the allowNullDate property.

var allowNullDate = $('#jqxDateTimeInput').jqxDateTimeInput('allowNullDate');

Determines whether Backspace and Delete keys are handled by the widget.

Code example

Set the allowKeyboardDelete property.

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

Get the allowKeyboardDelete property.

var allowKeyboardDelete = $('#jqxDateTimeInput').jqxDateTimeInput('allowKeyboardDelete');

Sets or gets the 'Clear' string displayed when the 'showFooter' property is true.

Code example

Set the clearString property.

$('#jqxDateTimeInput').jqxDateTimeInput({ clearString: 'Clear' });

Get the clearString property.

var clearString = $('#jqxDateTimeInput').jqxDateTimeInput('clearString'); 

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

Set the culture property.

$('#jqxDateTimeInput').jqxDateTimeInput({culture: 'en-US' });

Get the culture property.

var culture = $('#jqxDateTimeInput').jqxDateTimeInput('culture'); 

Specifies the animation duration of the popup calendar when it is going to be hidden.

Code example

Set the closeDelay property.

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

Get the closeDelay property.

var closeDelay = $('#jqxDateTimeInput').jqxDateTimeInput('closeDelay'); 

Sets or gets whether or not the popup calendar must be closed after selection.

Code example

Set the closeCalendarAfterSelection property .

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

Get the closeCalendarAfterSelection property.

var closeCalendarAfterSelection = $('#jqxDateTimeInput').jqxDateTimeInput('closeCalendarAfterSelection'); 

Sets the DropDown's alignment.

Possible Values:

'left'

right'

Code example

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

Get the dropDownHorizontalAlignment property.

var dropDownHorizontalAlignment = $('#jqxDateTimeInput').jqxDateTimeInput('dropDownHorizontalAlignment'); 

Sets or gets the DropDown's alignment.

Possible Values:

'top'

'bottom'

Code example

$('#jqxDateTimeInput').jqxDateTimeInput({ dropDownVerticalAlignment: 'top'}); 

Get the dropDownVerticalAlignment property.

var dropDownVerticalAlignment = $('#jqxDateTimeInput').jqxDateTimeInput('dropDownVerticalAlignment');

Determines whether the widget is disabled.

Code example

Set the disabled property.

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

Get the disabled property.

var disabled = $('#jqxDateTimeInput').jqxDateTimeInput('disabled');

When this property is set to true, the popup calendar may open above the input, if there's not enough space below the DateTimeInput.

Code example

Set the enableBrowserBoundsDetection property.

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

Get the enableBrowserBoundsDetection property.

var enableBrowserBoundsDetection = $('#jqxDateTimeInput').jqxDateTimeInput('enableBrowserBoundsDetection'); 

This setting enables the user to select only one symbol at a time when typing into the text input field.

Code example

Set the enableAbsoluteSelection property.

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

Get the enableAbsoluteSelection property.

var enableAbsoluteSelection = $('#jqxDateTimeInput').jqxDateTimeInput('enableAbsoluteSelection'); 

Sets the edit mode of the component. Possible values: 'default', 'full'. In 'default' mode, value is always displayed and is validated on each key press. In 'full' mode, when the input is empty (value is null), its value can be freely edited. On blur or when Enter is pressed, the value is validated and if it is valid, editing becomes the same as in editMode: "default". If the value is once again set to null (by pressing Delete, Ctrl + A and Delete, or "Clear"), full edit can again be entered. Full edit also takes into consideration the value of the "yearCutoff" property. This means that if yearCutoff is 1926 and 01/01/20 is entered, 20 will be interpreted as 2020; if 01/01/54 is entered, 54 will be interpreted as 1954.

Code example

Set the editMode property.

$('#jqxDateTimeInput').jqxDateTimeInput({ editMode: 'full' });
                        

Get the editMode property.

var editMode = $('#jqxDateTimeInput').jqxDateTimeInput('editMode'); 

Sets or gets which day to display in the first day column. By default the calendar displays 'Sunday' as first day.

Code example

Set the firstDayOfWeek property.

$('#jqxDateTimeInput').jqxDateTimeInput({ firstDayOfWeek: 1 });

Get the firstDayOfWeek property.

var firstDayOfWeek = $('#jqxDateTimeInput').jqxDateTimeInput('firstDayOfWeek'); 

Sets or gets the date time input format of the date.

Possible Values:

'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

Code example

Set the formatString property.

$('#jqxDateTimeInput').jqxDateTimeInput({ formatString: "dd"});

Get the formatString property.

var formatString = $('#jqxDateTimeInput').jqxDateTimeInput('formatString');

Sets or gets the height of the jqxDateTimeInput widget.

Code example

Set the height property.

$('#jqxDateTimeInput').jqxDateTimeInput({  height: '25px'});

Get the height property.

var height = $('#jqxDateTimeInput').jqxDateTimeInput('height');

Sets or gets the jqxDateTimeInput's minumun date.

Code example

Set the min property.

$('#jqxDateTimeInput').jqxDateTimeInput({ min: new Date(2000, 0, 1) });

Get the min property.

var minDate = $('#jqxDateTimeInput').jqxDateTimeInput('min');

Sets or gets the jqxDateTimeInput's maximum date.

Code example

Set the max property.

$('#jqxDateTimeInput').jqxDateTimeInput({ max: new Date(2013, 0, 1) });

Get the max property.

var maxDate = $('#jqxDateTimeInput').jqxDateTimeInput('max');

Specifies the animation duration of the popup calendar when it is going to be displayed.

Code example

Set the openDelay property.

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

Get the openDelay property.

var openDelay = $('#jqxDateTimeInput').jqxDateTimeInput('openDelay'); 

Determines the widget's place holder displayed when the widget's value is null.

Code example

Set the placeHolder property.

$('#jqxDateTimeInput').jqxDateTimeInput({placeHolder: "Null Value"});

Get the placeHolder property.

var placeHolder = $('#jqxDateTimeInput').jqxDateTimeInput('placeHolder');

Sets or gets the popup's z-index.

Code example

Set the popupZIndex property.

$("#jqxDateTimeInput").jqxDateTimeInput({popupZIndex: 999999});

Get the popupZIndex property.

var zIndex = $('#jqxDateTimeInput').jqxDateTimeInput('popupZIndex'); 

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

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

Get the rtl property.

var rtl = $('#jqxDateTimeInput').jqxDateTimeInput('rtl'); 

Code example

Set the readonly property .

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

Get the readonly property.

var readonly = $('#jqxDateTimeInput').jqxDateTimeInput('readonly'); 

Sets or gets a value indicating whether the dropdown calendar's footer is displayed.

Code example

Initialize a jqxDateTimeInput with the showFooter property specified.

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

Get the showFooter property.

var showFooter = $('#jqxDateTimeInput').jqxDateTimeInput('showFooter'); 

Sets or gets the dropdown calendar's selection mode.

Possible Values:

'none'

'default'

'range'

Code example

Set the selectionMode property.

$('#jqxDateTimeInput').jqxDateTimeInput({ selectionMode: 'range' });

Get the selectionMode property.

var selectionMode = $('#jqxDateTimeInput').jqxDateTimeInput('selectionMode'); 

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

Code example

Set the showWeekNumbers property.

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

Get the showWeekNumbers property.

var showWeekNumbers = $('#jqxDateTimeInput').jqxDateTimeInput('showWeekNumbers'); 

Determines whether the time button is visible.

Code example

Set the showTimeButton property.

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

Get the showTimeButton property.

var showTimeButton = $('#jqxDateTimeInput').jqxDateTimeInput('showTimeButton');

Determines whether the calendar button is visible.

Code example

Set the showCalendarButton property.

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

Get the showCalendarButton property.

var showCalendarButton = $('#jqxDateTimeInput').jqxDateTimeInput('showCalendarButton');

Determines whether the delete button is visible.

Code example:

showDeleteButton is set to true

$('#myDateTimeInput').jqxDateTimeInput({showDeleteButton: true});

Determines the template as an alternative of the default styles.

Possible Values:

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

Code examples

Set the template property.

$("#jqxDateTimeInput").jqxDateTimeInput({ template: 'primary'});

Get the template property.

var template = $('#jqxDateTimeInput').jqxDateTimeInput('template');

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Sets or gets the position of the text.

Code example

Set the textAlign property.

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

Get the textAlign property.

var textAlign = $('#jqxDateTimeInput').jqxDateTimeInput('textAlign'); 

Sets or gets the 'Today' string displayed in the dropdown Calendar when the 'showFooter' property is true.

Code example

Set the todayString property.

$('#jqxDateTimeInput').jqxDateTimeInput({ todayString: 'Today' });

Get the todayString property.

var todayString = $('#jqxDateTimeInput').jqxDateTimeInput('todayString'); 

Sets or gets the jqxDateTimeInput value.

Code example

Set the value property.

// use JavaScript Date
$('#jqxDateTimeInput').jqxDateTimeInput({ value: new Date(2000, 0, 1) });
// use String
$('#jqxDateTimeInput').jqxDateTimeInput({ value: "2000, 0, 1" });
                         

Get the value property.

var value = $('#jqxDateTimeInput').jqxDateTimeInput('value');

Sets or gets the width of the jqxDateTimeInput widget.

Code example

Set the width property.

$('#jqxDateTimeInput').jqxDateTimeInput({ width: '250px'});

Get the width property.

var width = $('#jqxDateTimeInput').jqxDateTimeInput('width');

Sets or gets the yearCutoff of the jqxDateTimeInput widget. This property is used with the Full edit mode. This means that if yearCutoff is 1926 and 01/01/20 is entered, 20 will be interpreted as 2020; if 01/01/54 is entered, 54 will be interpreted as 1954.

Code example

Set the yearCutoff property.

$('#jqxDateTimeInput').jqxDateTimeInput({ yearCutoff: 2000});

Get the yearCutoff property.

var yearCutoff = $('#jqxDateTimeInput').jqxDateTimeInput('yearCutoff');

This event is triggered on blur when the value is changed .

Code example

Bind to the change event by type: jqxDateTimeInput.

$('#jqxDateTimeInput').on('change', function (event) 
{  
    var jsDate = event.args.date; 
    var type = event.args.type; // keyboard, mouse or null depending on how the date was selected.
 
}); 

This event is triggered when the popup calendar is closed.

Code example

Bind to the close event by type: jqxDateTimeInput.

$('#jqxDateTimeInput').on('close', 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.

$('#jqxDateTimeInput').on('open', function (event) { // Some code here. }); 

This event is triggered when the text is changed.

Code example

Bind to the textchanged event by type: jqxDateTimeInput.

$('#jqxDateTimeInput').on('textchanged', function (event) { // Some code here.}); 

This event is triggered when the value is changed.

Code example

Bind to the valueChanged event by type: jqxDateTimeInput.

$('#jqxDateTimeInput').on('valueChanged', function (event) 
{  
    var jsDate = event.args.date; 
}); 

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

Code example

Invoke the close method.

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

Destroys the widget.

Code examples

Invoke the destroy method.

$('#jqxDateTimeInput').jqxDateTimeInput('destroy'); 

Focuses the widget.

Code examples

Invoke the focus method.

$('#jqxDateTimeInput').jqxDateTimeInput('focus'); 

Gets the selection range when the selectionMode is set to 'range'. The returned value is an Object with "from" and "to" fields. Each of the fields is a JavaScript Date Object.

.

Code example

Invoke the getRange method.

    var range = $("#jqxDateTimeInput").jqxDateTimeInput('getRange');
    var from = range.from;
    var to = range.to;
                        

Returns the input field's text.

Code example

Invoke the getText method.

var text= $('#jqxDateTimeInput').jqxDateTimeInput('getText'); 

When the getDate method is called, the user gets the current date. The returned value is JavaScript Date Object.

Code example

Invoke the getDate method.

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

When the setMaxDate method is called, the user gets the maximum navigation date. The returned value is JavaScript Date Object.

Code example

Invoke the getMaxDate method.

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

When the getMinDate method is called, the user gets the minimum navigation date. The returned value is JavaScript Date Object.

Code example

Invoke the getMinDate method.

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

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

Code example

Invoke the open method.

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

Sets the selection range when the selectionMode is set to 'range'. The required parameters are JavaScript Date Objects.

Code example

Invoke the setRange method.

// @param JavaScript Date

var date1 = new Date();
date1.setFullYear(2012, 7, 7);
var date2 = new Date();
date2.setFullYear(2012, 7, 15);
$("#jqxDateTimeInput").jqxDateTimeInput('setRange', date1, date2);
                        

// @param String

$("#jqxDateTimeInput").jqxDateTimeInput('setRange', "3/20/2013", |3/25/2013" );
                        

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.

$('#jqxDateTimeInput ').jqxDateTimeInput('setMinDate', new Date(2008, 0, 1));
                        

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.

$('#jqxDateTimeInput ').jqxDateTimeInput('setMaxDate', new Date(2013, 0, 1));
                        

When the setDate method is called, the user sets the date. The required parameter is a JavaScript Date Object.

Code example

Invoke the setDate method.

// @param JavaScript Date

                     
// Sets 1/January/2014
$('#jqxDateTimeInput ').jqxDateTimeInput('setDate', new Date(2014, 0, 1));

// @param String

                     
// Sets 1/January/2014
$('#jqxDateTimeInput ').jqxDateTimeInput('setDate', "2014, 0, 1");

Gets or sets the jqxDateTimeInput's value.

Code examples

Invoke the val method.

// Set Date using Javascript Date param. Sets year = 2013, month = april, day = 3.
$('#jqxDateTimeInput').jqxDateTimeInput('val', new Date(2013, 3, 3));
// Set Date using String param.
$('#jqxDateTimeInput').jqxDateTimeInput('val', "2013/3/3");
// Set Date using jQuery's val.
$('#jqxDateTimeInput').val("2013/3/3");
// Set Date using jQuery's val. Param is JavaScript Date.
$('#jqxDateTimeInput').val(new Date(2013, 3, 3));
// Set Null Date.
$('#jqxDateTimeInput').val(null);
// Set Range when the selectionMode is "range".
$('#jqxDateTimeInput').val("2013/3/3", "2013/3/10");
// Set Range using JavaScript Date.
$('#jqxDateTimeInput').val(new Date(2013, 3, 3), new Date(2013, 3, 10));
// Get Date. The returned value is string.
$('#jqxDateTimeInput').jqxDateTimeInput('val');
// Get Date. The returned value is Javascript Date.
$('#jqxDateTimeInput').jqxDateTimeInput('val', 'date');
// Get Date using jQuery's val. The returned value is string.
$('#jqxDateTimeInput').val();
// Get JavaScript Date using jQuery's val. 
$('#jqxDateTimeInput').val('date');