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