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

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 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 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 popup's z-index.

Code example

Set the popupZIndex property.

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

Get the popupZIndex property.

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

Determines whether the "showCalendarButton" is visible.

Code example

Set the showCalendarButton property.

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

Get the showCalendarButton property.

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

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

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

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

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

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 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 '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 displayed.

Code example

Set the openDelay property.

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

Get the openDelay property.

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

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

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

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

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

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

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

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 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 popup calendar is closed.

Code example

Bind to the close event by type: jqxDateTimeInput.

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

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

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

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

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

Returns the input field's text.

Code example

Invoke the getText method.

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

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

Code example

Invoke the close method.

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

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

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;
                        

Focuses the widget.

Code examples

Invoke the focus method.

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

Destroys the widget.

Code examples

Invoke the destroy method.

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

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