jQuery DateTimeInput API

Name Type Default

animationType String 'slide'

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

Try it: animationType is set to 'fade'

allowNullDate Boolean true

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

Try it: allowNullDate is set to false

allowKeyboardDelete Boolean true

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

Try it: allowKeyboardDelete is set to false

clearString String 'Clear'

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

Try it: clearString is set to 'Clear'

culture String default

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

Try it: culture is set to 'de-DE'

closeDelay Number 400

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

Try it: closeDelay is set to 2000

closeCalendarAfterSelection Boolean true

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

Try it: closeCalendarAfterSelection is set to false

dropDownHorizontalAlignment String 'left'

Sets the DropDown's alignment.

Possible Values:

'left'

right'

Code example

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

Get the dropDownHorizontalAlignment property.

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

Try it: dropDownHorizontalAlignment is set to 'right'

dropDownVerticalAlignment String 'bottom'

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

Try it: dropDownVerticalAlignment is set to "top"

disabled Boolean false

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

Try it: disabled is set to true

enableBrowserBoundsDetection Boolean false

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

Try it: enableBrowserBoundsDetection is set to true

enableAbsoluteSelection Boolean false

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

Try it: enableAbsoluteSelection is set to true

editMode String 'default'.

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

firstDayOfWeek Number 0

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

Try it: firstDayOfWeek is set to 3

formatString String dd/MM/yyyy

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

Try it: formatString is set to "dddd"

height Number/String null

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

Try it: height is set to "25px"

min Date Date(1900, 1, 1)

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

Try it: min is set to (2013, 0, 1)

max Date Date(2100, 1, 1)

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

Try it: max is set to (2014, 0, 1)

openDelay Number 350

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

Try it: openDelay is set to 2000

placeHolder String ""

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

Try it: placeHolder is set to "Null Value"

popupZIndex Number 20000

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

Try it: popupZIndex is set to 99999

rtl Boolean false

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

Try it: rtl is set to true

readonly Boolean false

Code example

Set the readonly property .

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

Get the readonly property.

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

Try it: readonly is set to true

showFooter Boolean false

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

Try it: showFooter is set to true

selectionMode String 'default'

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

Try it: selectionMode is set to 'range'

showWeekNumbers Boolean true

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

Try it: showWeekNumbers is set to false

showTimeButton Boolean false

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

Try it: showTimeButton is set to true

showCalendarButton Boolean true

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

Try it: showCalendarButton is set to false

showDeleteButton boolean false

Determines whether the delete button is visible.

Code example:

showDeleteButton is set to true

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

template String 'default'

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

Try it: template is set to 'primary'

theme String ''

textAlign String left

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

Try it: textAlign is set to "right"

todayString String 'Today'

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

Try it: todayString is set to 'Today'

value Date Today's Date

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

Try it: value is set to (2013, 0, 1)

width Number/String null

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

Try it: width is set to "250px"

yearCutoff Number null

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

change Event

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

Try it: Bind to the change event by type:jqxDateTimeInput

close Event

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

Try it: Bind to the close event by type:jqxDateTimeInput

open Event

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

Try it: Bind to the open event by type:jqxDateTimeInput

textchanged Event

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

Try it: Bind to the textchanged event by type:jqxDateTimeInput

valueChanged Event

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

Try it: Bind to the valueChanged event by type:jqxDateTimeInput

close Method

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

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the close method.

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

Try it: closes the jqxDateTimeInput

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

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

Try it: destroys the jqxDateTimeInput

focus Method

Focuses the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the focus method.

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

Try it: focus the jqxDateTimeInput

getRange Method

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.

Parameter	Type	Description
date	Date/String

Return Value
Object - object.from and object.to are javascript date objects.

Code example

Invoke the getRange method.


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

Try it: gets the range of the jqxDateTimeInput

getText Method

Returns the input field's text.

Parameter	Type	Description
None

Return Value
String

Code example

Invoke the getText method.

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

Try it: gets the text of the jqxDateTimeInput

getDate Method

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

Parameter	Type	Description
None

Return Value
Date

Code example

Invoke the getDate method.

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

Try it: gets the date of the jqxDateTimeInput

getMaxDate Method

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

Parameter	Type	Description
None

Return Value
Date

Code example

Invoke the getMaxDate method.

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

Try it: gets the maximum date of the jqxDateTimeInput

getMinDate Method

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

Parameter	Type	Description
None

Return Value
Date

Code example

Invoke the getMinDate method.

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

Try it: gets the minimum date of the jqxDateTimeInput

open Method

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

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the open method.

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

Try it: opens the jqxDateTimeInput

setRange Method

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

Parameter	Type	Description
date	Date/String
date2	Date/String

Return Value
None

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

Try it: sets the range of the jqxDateTimeInput

setMinDate Method

When the setMinDate method is called, the user sets the minimum date to which it is possible to navigate.

Parameter	Type	Description
date	Date/String

Return Value
None

Code example

Invoke the setMinDate method.

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

Try it: sets the minimum date of the jqxDateTimeInput

setMaxDate Method

When the setMaxDate method is called, the user sets the maximum date to which it is possible to navigate.

Parameter	Type	Description
date	Date/String

Return Value
None

Code example

Invoke the setMaxDate method.

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

Try it: sets the maximum date of the jqxDateTimeInput

setDate Method

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

Parameter	Type	Description
date	Date/String

Return Value
None

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

Try it: sets the date of the jqxDateTimeInput

val Method

Gets or sets the jqxDateTimeInput's value.

Parameter	Type	Description
date	Date/String(optional)
date2	Date/String(optional)	The end of range when the selectionMode is "range"

Return Value
Date/String - returns date if the passed parameter is "date"

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

Try it: gets of sets the value of the jqxDateTimeInput

Properties

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example:

Code examples

Code example

Code example

Code example

Code example

Code example

Events

Code example

Code example

Code example

Code example

Code example

Methods

Code example

Code examples

Code examples

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code examples