arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
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:
Attributes (move mouse over the names to see data types)
Name Description
No attributes available for this component.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 15.0.13,PrimeFaces Extensions: 15.0.14-SNAPSHOT,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),Build time: 2026-02-23 00:32