arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
ClockPicker
ClockPicker ClockPicker is a highly configurable component to integrate time inputs (hours / minutes) in a convenient way.

Based on clockpicker by weareoutman.
Components and more
Use Cases
Documentation pe:clockpicker
Attributes (move mouse over the names to see data types)
Name Description
accesskeyAccess key to transfer focus to the input element.
alignAlignment of the popup: 'left', 'right', 'top', 'bottom'.Default is left.
altAlternate textual description of the input field.
appendToSearch expression for the element to append the popup to.Default is @(body).
ariaDescribedByIdentifies the element(s) that describe the object, enhancing accessibility.
autoCloseWhether to close the popup after selecting time.Default is false.
autocompleteControls browser autocomplete behavior. Possible values are 'on', 'off', and 'new-password'.
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
converterEL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessageCustom message to display when conversion fails.
dirDirection indication for text that does not inherit directionality.Default is ltr.
disabledSpecifies that an element should be disabled.Default is false.
idUnique identifier of the component in a namingContainer.Default is generated.
immediateWhen set true, process validations logic is executed at apply request values phase for this component.Default is false.
inputmodeSpecifies the type of data expected in the input, aiding virtual keyboards.
labelA localized user presentable name.
langSpecifies the language of the element's content.
localeLocale for time formatting. Can be a string or java.util.Locale instance.
maxlengthDefines the maximum number of characters allowed in the input.Default is Integer.MIN_VALUE.
onafterampmselectClient-side callback after AM/PM is selected.
onafterdoneClient-side callback after done is applied.
onafterhideClient-side callback after the picker is hidden.
onafterhourselectClient-side callback after hour is selected.
onaftershowClient-side callback after the picker is shown.
onbeforedoneClient-side callback before done is applied.
onbeforehideClient-side callback before the picker is hidden.
onbeforehourselectClient-side callback before hour is selected.
onbeforeshowClient-side callback before the picker is shown.
onblurFires when an element loses focus.
onchangeFires when the value of an element has been changed.
onclickFires when a mouse click on the element.
oncontextmenuScript to execute when the context menu is triggered.
oncopyScript to execute when content is copied from the element.
oncutScript to execute when content is cut from the element.
ondblclickFires when a mouse double-click on the element.
ondragScript to execute when an element is dragged.
ondragendScript to execute at the end of a drag operation.
ondragenterScript to execute when a dragged element enters a valid drop target.
ondragleaveScript to execute when a dragged element leaves a valid drop target.
ondragoverScript to execute when a dragged element is over a valid drop target.
ondragstartScript to execute at the start of a drag operation.
ondropScript to execute when a dragged element is dropped.
onfocusFires when an element gets focus.
oninputScript to execute when the element receives user input.
oninvalidScript to execute when the element's value is invalid.
onkeydownFires when a user is pressing a key.
onkeypressFires when a user presses a key.
onkeyupFires when a user releases a key.
onmousedownFires when a mouse button is pressed down on an element.
onmousemoveFires when the mouse pointer is moving while it is over an element.
onmouseoutFires when the mouse pointer moves out of an element.
onmouseoverFires when the mouse pointer moves onto an element.
onmouseupFires when a mouse button is released over an element.
onpasteScript to execute when content is pasted into the element.
onresetScript to execute when the form is reset.
onscrollScript to execute when the element is scrolled.
onsearchScript to execute when a search is performed.
onselectScript to execute when text is selected.
onwheelScript to execute when the mouse wheel is used.
placeholderSpecifies a short hint describing the expected value of the input.
placementPosition of the popup: 'bottom', 'top', 'left', 'right'.Default is bottom.
readonlySpecifies that an input field is read-only.Default is false.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
requiredMarks component as required.Default is false.
requiredMessageCustom message to display when the required validation fails.
roleDefines the role of the element for accessibility purposes.
showOnWhen to show the picker: 'focus' or 'button'.Default is focus.
sizeNumber of characters used to determine the width of the input element.Default is Integer.MIN_VALUE.
styleSpecifies an inline CSS style for an element.
styleClassSpecifies one or more CSS class names for an element.
tabindexSpecifies the tab order of an element.
titleSpecifies extra information about an element (displayed as a tooltip).
twelveHourUse 12-hour format with AM/PM.Default is false.
typeInput field type.Default is text.
validatorA method expression referring to a method validating the input.
validatorMessageCustom message to display when validation fails.
valueValue of the component.
valueChangeListenerA method binding expression referring to a method for handling a valuchangeevent.
vibrateWhether to vibrate on selection (mobile).Default is true.
widgetVarName of the client side widget.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 16.0.0-SNAPSHOT,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-03-14 23:18