jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" /> <script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../../../scripts/documentation.js"></script> <meta name="keywords" content="jQuery, Calendar, Month Calendar, DateTimeInput, Date Input, Date Picker, DateTimePicker, Time Picker" /> <meta name="description" content="This page represents the help documentation of the jqxDateTimeInput widget." /> <title>jqxDateTimeInput API Reference</title> <script type="text/javascript"> $(document).ready(function () { $(".documentation-option-type-click").click(function (event) { $(event.target).parents('tr').next().find(".property-content").toggle(); }); }); </script> </head> <body> <div id="properties"> <h2 class="documentation-top-header">Properties</h2> <table class="documentation-table"> <tr> <th>Name </th> <th>Type </th> <th>Default </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span22'>animationType</span> </td> <td> <span>String</span> </td> <td>'slide' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the type of the animation. </p> <b>Possible Values:</b> <br /> <pre><code>'fade'</code></pre> <pre><code>'slide'</code></pre> <pre><code>'none'</code></pre> <h4>Code example</h4> <p> Set the <code>animationType</code> property </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({animationType: 'none'}); </code></pre> <p> Get the <code>animationType</code> property. </p> <pre><code>var animationType = $('#jqxDateTimeInput').jqxDateTimeInput('animationType'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3qKpT/">animationType is set to 'fade'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span28'>allowNullDate</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines whether Null is allowed as a value. </p> <h4>Code example</h4> <p> Set the <code>allowNullDate</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({allowNullDate: false});</code></pre> <p> Get the <code>allowNullDate</code> property. </p> <pre><code>var allowNullDate = $('#jqxDateTimeInput').jqxDateTimeInput('allowNullDate');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hYdWh/">allowNullDate is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span31'>allowKeyboardDelete</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines whether <code>Backspace</code> and <code>Delete</code> keys are handled by the widget. </p> <h4>Code example</h4> <p> Set the <code>allowKeyboardDelete</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({allowKeyboardDelete: false});</code></pre> <p> Get the <code>allowKeyboardDelete</code> property. </p> <pre><code>var allowKeyboardDelete = $('#jqxDateTimeInput').jqxDateTimeInput('allowKeyboardDelete');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dRL6b/">allowKeyboardDelete is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span47'>clearString</span> </td> <td> <span>String</span> </td> <td>'Clear' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the 'Clear' string displayed when the 'showFooter' property is true. </p> <h4>Code example</h4> <p> Set the <code>clearString</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ clearString: 'Clear' });</code></pre> <p> Get the <code>clearString</code> property. </p> <pre><code>var clearString = $('#jqxDateTimeInput').jqxDateTimeInput('clearString'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ThYCa/">clearString is set to 'Clear'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>culture</span> </td> <td> <span>String</span> </td> <td>default </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> 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'. </p> <h4>Code example</h4> <p> Set the <code>culture</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({culture: 'en-US' });</code></pre> <p> Get the <code>culture</code> property. </p> <pre><code>var culture = $('#jqxDateTimeInput').jqxDateTimeInput('culture'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xZYXn/">culture is set to 'de-DE'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>closeDelay</span> </td> <td> <span>Number</span> </td> <td>400 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Specifies the animation duration of the popup calendar when it is going to be hidden. </p> <h4>Code example</h4> <p> Set the <code>closeDelay</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ closeDelay: 200 }); </code></pre> <p> Get the <code>closeDelay</code> property. </p> <pre><code>var closeDelay = $('#jqxDateTimeInput').jqxDateTimeInput('closeDelay'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JgcfP/">closeDelay is set to 2000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span11'>closeCalendarAfterSelection</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether or not the popup calendar must be closed after selection. </p> <h4>Code example</h4> <p> Set the <code>closeCalendarAfterSelection</code> property . </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ closeCalendarAfterSelection:false}); </code></pre> <p> Get the <code>closeCalendarAfterSelection</code> property. </p> <pre><code>var closeCalendarAfterSelection = $('#jqxDateTimeInput').jqxDateTimeInput('closeCalendarAfterSelection'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uP3rK/">closeCalendarAfterSelection is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span21'>dropDownHorizontalAlignment</span> </td> <td> <span>String</span> </td> <td>'left' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets the DropDown's alignment. </p> <b>Possible Values:</b> <br /> <pre><code>'left'</code></pre> <pre><code>right'</code></pre> <h4>Code example</h4> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ dropDownHorizontalAlignment: 'right'}); </code></pre> <p> Get the <code>dropDownHorizontalAlignment</code> property. </p> <pre><code>var dropDownHorizontalAlignment = $('#jqxDateTimeInput').jqxDateTimeInput('dropDownHorizontalAlignment'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/WbzUw/">dropDownHorizontalAlignment is set to 'right'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span85'>dropDownVerticalAlignment</span> </td> <td> <span>String</span> </td> <td>'bottom' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the DropDown's alignment. </p> <b>Possible Values:</b> <br /> <pre><code>'top'</code></pre> <pre><code>'bottom'</code></pre> <h4>Code example</h4> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ dropDownVerticalAlignment: 'top'}); </code></pre> <p> Get the <code>dropDownVerticalAlignment</code> property. </p> <pre><code>var dropDownVerticalAlignment = $('#jqxDateTimeInput').jqxDateTimeInput('dropDownVerticalAlignment');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/1k90z3x1/">dropDownVerticalAlignment is set to "top"</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span29'>disabled</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines whether the widget is disabled. </p> <h4>Code example</h4> <p> Set the <code>disabled</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({disabled: false});</code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxDateTimeInput').jqxDateTimeInput('disabled');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/L9aaR/">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span12'>enableBrowserBoundsDetection</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> When this property is set to true, the popup calendar may open above the input, if there's not enough space below the DateTimeInput. </p> <h4>Code example</h4> <p> Set the <code>enableBrowserBoundsDetection</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ enableBrowserBoundsDetection: false}); </code></pre> <p> Get the <code>enableBrowserBoundsDetection</code> property. </p> <pre><code>var enableBrowserBoundsDetection = $('#jqxDateTimeInput').jqxDateTimeInput('enableBrowserBoundsDetection'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/c8HyD/">enableBrowserBoundsDetection is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span13'>enableAbsoluteSelection</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This setting enables the user to select only one symbol at a time when typing into the text input field. </p> <h4>Code example</h4> <p> Set the <code>enableAbsoluteSelection</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ enableAbsoluteSelection: true }); </code></pre> <p> Get the <code>enableAbsoluteSelection</code> property. </p> <pre><code>var enableAbsoluteSelection = $('#jqxDateTimeInput').jqxDateTimeInput('enableAbsoluteSelection'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8cxPC/">enableAbsoluteSelection is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span19'>firstDayOfWeek</span> </td> <td> <span>Number</span> </td> <td>0 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets which day to display in the first day column. By default the calendar displays 'Sunday' as first day. </p> <h4>Code example</h4> <p> Set the <code>firstDayOfWeek</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ firstDayOfWeek: 1 });</code></pre> <p> Get the <code>firstDayOfWeek</code> property. </p> <pre><code>var firstDayOfWeek = $('#jqxDateTimeInput').jqxDateTimeInput('firstDayOfWeek'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/27DsA/">firstDayOfWeek is set to 3</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>formatString</span> </td> <td> <span>String</span> </td> <td>dd/MM/yyyy </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the date time input format of the date. </p> <b>Possible Values:</b> <br /> <pre><code>'d'-the day of the month</code></pre> <pre><code>'dd'-the day of the month</code></pre> <pre><code>'ddd'-the abbreviated name of the day of the week</code></pre> <pre><code>'dddd'-the full name of the day of the week</code></pre> <pre><code>'h'-the hour, using a 12-hour clock from 1 to 12</code></pre> <pre><code>'hh'-the hour, using a 12-hour clock from 01 to 12</code></pre> <pre><code>'H'-the hour, using a 24-hour clock from 0 to 23</code></pre> <pre><code>'HH'-the hour, using a 24-hour clock from 00 to 23</code></pre> <pre><code>'m'-the minute, from 0 through 59</code></pre> <pre><code>'mm'-the minutes,from 00 though59</code></pre> <pre><code>'M'-the month, from 1 through 12;</code></pre> <pre><code>'MM'-the month, from 01 through 12</code></pre> <pre><code>'MMM'-the abbreviated name of the month</code></pre> <pre><code>'MMMM'-the full name of the month</code></pre> <pre><code>'s'-the second, from 0 through 59</code></pre> <pre><code>'ss'-the second, from 00 through 59</code></pre> <pre><code>'t'-the first character of the AM/PM designator</code></pre> <pre><code>'tt'-the AM/PM designator</code></pre> <pre><code>'y'-the year, from 0 to 99</code></pre> <pre><code>'yy'-the year, from 00 to 99</code></pre> <pre><code>'yyy'-the year, with a minimum of three digits</code></pre> <pre><code>'yyyy'-the year as a four-digit number</code></pre> <h4>Code example</h4> <p> Set the <code>formatString</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ formatString: "dd"});</code></pre> <p> Get the <code>formatString</code> property. </p> <pre><code>var formatString = $('#jqxDateTimeInput').jqxDateTimeInput('formatString');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TeQMx/">formatString is set to "dddd"</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>height</span> </td> <td> <span>Number/String</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the height of the jqxDateTimeInput widget. </p> <h4>Code example</h4> <p> Set the <code>height</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ height: '25px'});</code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxDateTimeInput').jqxDateTimeInput('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CuG54/">height is set to "25px"</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>min</span> </td> <td> <span>Date</span> </td> <td>Date(1900, 1, 1) </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxDateTimeInput's minumun date. </p> <h4>Code example</h4> <p> Set the <code>min</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ min: new Date(2000, 0, 1) });</code></pre> <p> Get the <code>min</code> property. </p> <pre><code>var minDate = $('#jqxDateTimeInput').jqxDateTimeInput('min');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XEvPK/">min is set to (2013, 0, 1)</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>max</span> </td> <td> <span>Date</span> </td> <td>Date(2100, 1, 1) </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxDateTimeInput's maximum date. </p> <h4>Code example</h4> <p> Set the <code>max</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ max: new Date(2013, 0, 1) });</code></pre> <p> Get the <code>max</code> property. </p> <pre><code>var maxDate = $('#jqxDateTimeInput').jqxDateTimeInput('max');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CfJEQ/">max is set to (2014, 0, 1)</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>openDelay</span> </td> <td> <span>Number</span> </td> <td>350 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Specifies the animation duration of the popup calendar when it is going to be displayed. </p> <h4>Code example</h4> <p> Set the <code>openDelay</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ openDelay: 200 }); </code></pre> <p> Get the <code>openDelay</code> property. </p> <pre><code>var openDelay = $('#jqxDateTimeInput').jqxDateTimeInput('openDelay'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LsY2A/">openDelay is set to 2000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span33'>placeHolder</span> </td> <td> <span>String</span> </td> <td>"" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines the widget's place holder displayed when the widget's value is null. </p> <h4>Code example</h4> <p> Set the <code>placeHolder</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({placeHolder: "Null Value"});</code></pre> <p> Get the <code>placeHolder</code> property. </p> <pre><code>var placeHolder = $('#jqxDateTimeInput').jqxDateTimeInput('placeHolder');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3r0qdyq7/">placeHolder is set to "Null Value"</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span73'>popupZIndex</span> </td> <td> <span>Number</span> </td> <td>20000 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the popup's z-index. </p> <h4>Code example</h4> <p> Set the <code>popupZIndex</code> property. </p> <pre><code>$("#jqxDateTimeInput").jqxDateTimeInput({popupZIndex: 999999});</code></pre> <p> Get the <code>popupZIndex</code> property. </p> <pre><code>var zIndex = $('#jqxDateTimeInput').jqxDateTimeInput('popupZIndex'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hCD2Y/">popupZIndex is set to 99999</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span51'>rtl</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p>Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p> <h4>Code example</h4> <p> Set the <code>rtl</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({rtl : true}); </code></pre> <p> Get the <code>rtl</code> property. </p> <pre><code>var rtl = $('#jqxDateTimeInput').jqxDateTimeInput('rtl'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CBByC/">rtl is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>readonly</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> </p> <h4>Code example</h4> <p> Set the <code>readonly</code> property . </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ readonly: true});</code></pre> <p> Get the <code>readonly</code> property. </p> <pre><code>var readonly = $('#jqxDateTimeInput').jqxDateTimeInput('readonly'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yv5gR/">readonly is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span35'>showFooter</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets a value indicating whether the dropdown calendar's footer is displayed. </p> <h4>Code example</h4> <p> Initialize a jqxDateTimeInput with the <code>showFooter</code> property specified. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ showFooter: true });</code></pre> <p> Get the <code>showFooter</code> property. </p> <pre><code>var showFooter = $('#jqxDateTimeInput').jqxDateTimeInput('showFooter'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TuRtV/">showFooter is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span45'>selectionMode</span> </td> <td> <span>String</span> </td> <td>'default' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the dropdown calendar's selection mode. </p> <b>Possible Values:</b> <br /> <pre><code>'none'</code></pre> <pre><code>'default'</code></pre> <pre><code>'range'</code></pre> <h4>Code example</h4> <p> Set the <code>selectionMode</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ selectionMode: 'range' });</code></pre> <p> Get the <code>selectionMode</code> property. </p> <pre><code>var selectionMode = $('#jqxDateTimeInput').jqxDateTimeInput('selectionMode'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Bp7Zp/">selectionMode is set to 'range'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span20'>showWeekNumbers</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets a value whether the week`s numbers are displayed. </p> <h4>Code example</h4> <p> Set the <code>showWeekNumbers</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({ showWeekNumbers: false });</code></pre> <p> Get the <code>showWeekNumbers</code> property. </p> <pre><code>var showWeekNumbers = $('#jqxDateTimeInput').jqxDateTimeInput('showWeekNumbers'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KWzzF/">showWeekNumbers is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span32'>showTimeButton</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines whether the time button is visible. </p> <h4>Code example</h4> <p> Set the <code>showTimeButton</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({showTimeButton: true});</code></pre> <p> Get the <code>showTimeButton</code> property. </p> <pre><code>var showTimeButton = $('#jqxDateTimeInput').jqxDateTimeInput('showTimeButton');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/38qo78yy/">showTimeButton is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span23'>showCalendarButton</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines whether the calendar button is visible. </p> <h4>Code example</h4> <p> Set the <code>showCalendarButton</code> property. </p> <pre><code>$('#jqxDateTimeInput').jqxDateTimeInput({showCalendarButton: false});</code></pre> <p> Get the <code>showCalendarButton</code> property. </p> <pre><code>var showCalendarButton = $('#jqxDateTimeInput').jqxDateTimeInput('showCalendarButton');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uM34b/">showCalendarButton is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span63'>theme</span> </td> <td> <span>String</span> </td> <td>'' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets the widget's theme. </p> 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: <ul> <li>Include the