arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
TimePicker
This use case demonstrates two time pickers to select chronological time range. The first timepicker is restricted to before the time selected in the second timepicker, and vice versa.
Start time
End time
Source

<h:panelGrid columns="5">
    <h:outputText value="Start time"/>
    <pe:timePicker value="#{timePickerController.time1}" mode="popup" onHourShow="tpStartOnHourShowCallback"
                   onMinuteShow="tpStartOnMinuteShowCallback" widgetVar="startTimeWidget"/>
    
    <h:panelGroup layout="block" style="width:20px;"/>
    
    <h:outputText value="End time"/>
    <pe:timePicker value="#{timePickerController.time2}" mode="popup" onHourShow="tpEndOnHourShowCallback"
                   onMinuteShow="tpEndOnMinuteShowCallback" widgetVar="endTimeWidget"/>
</h:panelGrid>
            
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