jQuery TimePicker API

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