Properties

Properties

autoSwitchToMinutes Boolean

Sets or gets whether after selecting hours, the element will automatically switch to minute selection.

Code examples

Set the autoSwitchToMinutes property. 

$('#jqxTimePicker').jqxTimePicker({ autoSwitchToMinutes: false });

Get the autoSwitchToMinutes property. 

var autoSwitchToMinutes = $('#jqxTimePicker').jqxTimePicker('autoSwitchToMinutes');
disabled Boolean false

Enables or disables the jqxTimePicker.

Code examples

Set the disabled property. 

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

Get the disabled property. 

var disabled = $('#jqxTimePicker').jqxTimePicker('disabled');
footer Boolean

Sets or gets whether the footer is shown.

Code examples

Set the footer property. 

<body>  
  <div id="timepicker"></div>

  <template id="templateWithButtons">
    <div id="buttonContainer">
      <button>CANCEL</button>
      <button>OK</button>
    </div>
  </template>

  <script type="text/javascript">
    $(document).ready(function () {
      $("#timepicker").jqxTimePicker({
        width: 400,
        footer: true,
        footerTemplate: "templateWithButtons"
      });

      $("#buttonContainer button").jqxButton();
    });
  </script>
</body>
footerTemplate String/HTMLTemplateElement

Sets or gets the footer template. The value of this property can be the id of an HTMLTemplateElement or the HTMLTemplateElement itself. If set to null, a default, empty, template is applied. See footer property.

format String 12-hour

Sets or gets the whether hour selection format is using a 12-hour or 24-hour clock convention.

Possible Values: 

'12-hour'
'24-hour'

Code examples

Set the format property. 

$('#jqxTimePicker').jqxTimePicker({ format: '24-hour' });

Get the autoSwitchToMinutes property.

var format = $('#jqxTimePicker').jqxTimePicker('format');
height Number/String 500

Sets or gets the jqxTimePicker's height.

Code examples:

Set the height property.

$('#jqxTimePicker').jqxTimePicker({ height: '400px' });

Get the height property.

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

minuteInterval Number 1

Sets or gets the step when selecting minutes.

Code examples

Set the minuteInterval property. 

$('#jqxTimePicker').jqxTimePicker({ minuteInterval: 5 });

Get the minuteInterval property. 

var minuteInterval = $('#jqxTimePicker').jqxTimePicker('minuteInterval');
name String

The name of the control.
readonly Boolean

Disables user interaction with the element.

Code example:

$('#myTimePicker').jqxTimePicker({ readonly: true });
selection String hour

Sets or gets whether hour or minute selection is currently enabled.

Possible Values: 

'hour'
'minute'

Code examples:

Set the selection property. 

$('#jqxTimePicker').jqxTimePicker({ selection: 'minute' });

Get the selection property. 

var selection = $('#jqxTimePicker').jqxTimePicker('selection');
theme String

Determines the theme. Theme defines the look of the element. 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.
unfocusable Boolean

If is set to true, the element cannot be focused.

Code example:

$('#myTimePicker').jqxTimePicker({ unfocusable: true });
value Date new Date()

Sets or gets the value.

Code examples:

Set the value property.

$('#jqxTimePicker').jqxTimePicker({ value: new Date() });

Get the value property.

var value = $('#jqxTimePicker').jqxTimePicker('value');
view String portrait

Sets or gets whether the element is in landscape or portrait orientation.

Possible Values: 

'landscape'
'portrait'

Code example:

$('#jqxTimePicker').jqxTimePicker({ view: "landscape" });

width Number/String 500

Sets or gets the jqxTimePicker's width.

Code examples:

Set the width property.

$('#jqxTimePicker').jqxTimePicker({ width: '400px' });

Get the width property.

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

Events

change Event

This event is triggered when the value is changed.

Code example:

$("#jqxTimePicker").on("change", function (event) {
        var args = event.args;
        var value = args.value;
        var oldValue = args.oldValue;
        // Get current hour
        var hour = value.getHours();
        // Get current minutes
        var minutes = value.getMinutes();
        console.log("New time: " + hour + ":" + minutes < 10 ? "0" + minutes : minutes);
      });

Methods

setHours Method

Sets the hours.

Parameters
Name Type Description
hours Number The hours to set.

Return Value
None

Code example:

Invoke the setHours method. 

$('#jqxTimePicker').jqxTimePicker('setHours', 7);

setMinutes Method

Sets the minutes.

Parameters
Name Type Description
minutes Number The minutes to set.

Return Value
None

Code example:

Invoke the setMinutes method. 

$('#jqxTimePicker').jqxTimePicker('setMinutes', 24);