Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
TimePicker
Time picker has three modes 'inline', 'popup', 'spinner'. 'Spinner' is the most useful mode because it allows to increment / decrement hours / minutes in a convenient way. One limitation - 'spinner' mode is not compatible with onHourShow / onMinuteShow callbacks because time to be in- decremented can not be easy determinated then.

Custom time picker demonstrates how to set arbitrary time separator, start / end hours / minutes, interval for minutes, period, buttons, and some other settings.

Inline mode

Popup mode

Spinner mode

Customization

Show popup by button

Spinner with button

Source

<p:messages id="messages"/>

<h:panelGroup id="timePickerGroup" layout="block">
    <p>
    Inline mode
    <pe:timePicker value="#{timePickerController.time1}" mode="inline" widgetVar="inlineTimeWidget"
                   label="Inline time picker"/>
    </p>

    <p>
    Popup mode
    <pe:timePicker value="#{timePickerController.time2}" mode="popup" widgetVar="popupTimeWidget"
                   label="Popup time picker"/>
    </p>

    <p>
    Spinner mode
    <pe:timePicker value="#{timePickerController.time3}" widgetVar="spinnerTimeWidget"
                   label="Spinner time picker"/>
    </p>

    <p>
    Customization
    <pe:timePicker value="#{timePickerController.time4}" timeSeparator="-" startHours="8" endHours="20"
                   startMinutes="10" endMinutes="40" intervalMinutes="10" showCloseButton="true"
                   showDeselectButton="true" showNowButton="true" rows="3" showPeriod="true" size="8"
                   widgetVar="customTimeWidget" label="Custom time picker" required="true" requiredMessage="Customization is required!"/>
    </p>

    <p>
    Show popup by button
    <pe:timePicker value="#{timePickerController.time5}" mode="popup" widgetVar="popupBtnTimeWidget"
                   showOn="button" label="Popup time picker with button"/>
    </p>

    <p>
    Spinner with button
    <pe:timePicker value="#{timePickerController.time6}" mode="spinner" widgetVar="spinnerBtnTimeWidget"
                   showOn="button" label="Spinner time picker with button"/>
    </p>
</h:panelGroup>

<p:commandButton type="button" value="Disable time pickers" styleClass="mt-2 mr-2"
                 onclick="PF('inlineTimeWidget').disable();PF('popupTimeWidget').disable();
                     PF('spinnerTimeWidget').disable();PF('customTimeWidget').disable();
                     PF('popupBtnTimeWidget').disable();PF('spinnerBtnTimeWidget').disable();"/>
<p:commandButton type="button" value="Enable time pickers" styleClass="mt-2 mr-2"
                 onclick="PF('inlineTimeWidget').enable();PF('popupTimeWidget').enable();
                     PF('spinnerTimeWidget').enable();PF('customTimeWidget').enable();
                     PF('popupBtnTimeWidget').enable();PF('spinnerBtnTimeWidget').enable();"/>
<p:commandButton id="submitButton" value="Submit" actionListener="#{timePickerController.showTime}"
                 process="@this timePickerGroup" update="messages timeDialog timePickerGroup"
                 styleClass="mt-2 mr-2" icon="pi pi-save"/>

<p:dialog id="timeDialog" header="Selected Values" visible="#{timePickerController.showTimeDialog}">
    <h:panelGrid columns="1" style="margin: 10px;">
        <h:outputText value="Inline: #{timePickerController.formattedTime1}"/>
        <h:outputText value="Popup: #{timePickerController.formattedTime2}"/>
        <h:outputText value="Spinner: #{timePickerController.formattedTime3}"/>
        <h:outputText value="Custom: #{timePickerController.formattedTime4}"/>
        <h:outputText value="Button: #{timePickerController.formattedTime5}"/>
        <h:outputText value="Spinner and Button: #{timePickerController.formattedTime6}"/>
    </h:panelGrid>
</p:dialog>
            
Components and more
Documentation pe:timePicker
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
value Value of the component. Either java.util.Date or java.time.LocalTime
widgetVar Name of the client side widget.
required Marks component as required.
validator A method expression referring to a method validationg the input.
valueChangeListener A method binding expression referring to a method for handling a valuchangeevent.
requiredMessage Message to display when required field validation fails.
converterMessage Message to display when conversion fails.
validatorMessage Message to display when validation fails.
accesskey Access key to transfer focus to the input element.
alt Alternate textual description of the input element.
autocomplete Controls browser autocomplete behavior.
dir Direction indication for text that does not inherit directionality.
disabled Disables the time picker when set to true.
inputmode HTML5 inputmode attribute for hinting at the type of data this control has for touch devices to display appropriate virtual keyboard.
label A localized user presentable name for this component.
onblur Client side callback to execute when input element loses focus.
onchange Client side callback to execute when input element loses focus and its value has been modified since gaining focus.
onclick Client side callback to execute when input element is clicked.
ondblclick Client side callback to execute when input element is double-clicked.
onfocus Client side callback to execute when input element receives focus.
onkeydown Client side callback to execute when a key is pressed down over input element.
onkeypress Client side callback to execute when a key is pressed and released over input element.
onkeyup Client side callback to execute when a key is released over input element.
onmousedown Client side callback to execute when a pointer input element is pressed down over input element.
onmousemove Client side callback to execute when a pointer input element is moved within input element.
onmouseout Client side callback to execute when a pointer input element is moved away from input element.
onmouseover Client side callback to execute when a pointer input element is moved onto input element.
onmouseup Client side callback to execute when a pointer input element is released over input element.
onwheel Client side callback to execute when the mouse wheel rolls up or down over an element.
onselect Client side callback to execute when text within input element is selected by user.
oncut Client side callback to execute when the user copies the content of an element.
oncopy Client side callback to execute when the user cuts the content of an element.
onpaste Client side callback to execute when the user pastes some content in an element.
oninput Client side callback to execute when an element gets user input.
oncontextmenu Client side callback to execute when a context menu is triggered.
oninvalid Client side callback to execute when an element is invalid.
onreset Client side callback to execute when the Reset button in a form is clicked.
onsearch Client side callback to execute when the user writes something in a search field.
ondrag Client side callback to execute when an element is dragged.
ondragend Client side callback to execute at the end of a drag operation.
ondragenter Client side callback to execute when an element has been dragged to a valid drop target.
ondragleave Client side callback to execute when an element leaves a valid drop target.
ondragover Client side callback to execute when an element is being dragged over a valid drop target.
ondragstart Client side callback to execute at the start of a drag operation.
ondrop Client side callback to execute when dragged element is being dropped.
onscroll Client side callback to execute when an element's scrollbar is being scrolled.
style Style of the time picker input element.
styleClass Style class of the time picker input element.
timeSeparator The character to use to separate hours and minutes. Default is :.
showPeriod Defines whether to show AM/PM with selected time. Default is false.
dialogPosition Corner of the dialog to position. Default is 'left top'.
inputPosition Corner of the input to position. Default is 'left bottom'.
mode Mode specifies appearance of time picker. Possible values are 'popup', 'spinner', 'inline'. Default is 'spinner'.
startHours Specifies first displayed hour. Possible range is 0-23. Default is 0.
endHours Specifies last displayed hour. Possible range is 0-23. Default is 23.
startMinutes Specifies first displayed minute. Possible range is 0-55. Default is 0.
endMinutes Specifies last displayed minute. Possible range is 0-55. Default is 55.
intervalMinutes Specifies interval of displayed minutes. Default is 5.
rows Specifies number of rows for the input tables, minimum 2, makes more sense if you use multiple of 2. Default is 4.
showHours Defines if the hours section is displayed or not. Set to false to get a minute only dialog. Default is true.
showMinutes Defines if the minutes section is displayed or not. Set to false to get a hours only dialog. Default is true.
showCloseButton Shows an 'ok' button to confirm the edit. Default is false.
showDeselectButton Shows the 'deselect' time button. Default is false.
showNowButton Shows the 'now' button. Default is false.
onHourShow Defines a callback to enable / disable certain hours. Example: function onHourShow(hour). Default is null.
onMinuteShow Defines a callback to enable / disable certain minutes. Example: function onMinuteShow(hour, minute). Default is null.
showOn Define when the timepicker is shown. 'focus': when the input gets focus, 'button' when the button trigger element is clicked, 'both': when the input gets focus and when the button is clicked. Default is 'focus'.
locale String or java.util.Locale representing user locale. Default is a locale specified in view root.
minHour Set the minimum hour selectable by the user, disable hours previous to min. hours. Default is null (not set).
minMinute Set the minimum minutes selectable by the user, disable minutes previous to min. minutes. Default is null (not set).
maxHour Set the maximum hour selectable by the user, disable hours after max. hours. Default is null (not set).
maxMinute Set the maximum minutes selectable by the user, disable minutes after max. minutes. Default is null (not set).
readonlyInput Makes input text of a popup calendar readonly. Default is false.
size Number of characters used to determine the width of the input element. Default is 5.
Events (move mouse over the names to see classes)
Name Description
timeSelectfires when an hour / minutes is selected
closefires when the time picker is closed
beforeShowfires before the time picker is rendered and displayed
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 14.0.5,PrimeFaces Extensions: 14.0.5,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2024-09-10 21:01