arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
TimePicker
Advanced example demonstrates using of ajax events, callbacks and interesting settings.
TimeSelect eventBeforeShow / Close eventsOnly hoursOnly minutesRestricted time
Source

<script>
PrimeFacesExt.locales.TimePicker['pt_BR'] = {
        hourText: 'Horas',
        minuteText: 'Minutos',
        amPmText: ['AM', 'PM'],
        closeButtonText: 'Fechar',
        nowButtonText: 'Agora',
        deselectButtonText: 'Limpar seleção'
    };
</script>

<h:panelGrid id="timePickerGrid" columns="5" columnClasses="timePickerColumn1,timePickerColumn,timePickerColumn,timePickerColumn,timePickerColumn,timePickerColumn">
    <h:outputText value="TimeSelect event"/>
    <h:outputText value="BeforeShow / Close events"/>
    <h:outputText value="Only hours"/>
    <h:outputText value="Only minutes"/>
    <h:outputText value="Restricted time"/>
    
    <pe:timePicker id="inlineTime" value="#{timePickerController.time1}" mode="inline" locale="#{timePickerController.locale}">
        <p:ajax event="timeSelect" listener="#{timePickerController.timeSelectListener}" update="growl"/>
    </pe:timePicker>    
    <pe:timePicker id="spinnerTime" value="#{timePickerController.time2}" showPeriod="true" style="width: 100px;" locale="#{timePickerController.locale}">
        <p:ajax event="beforeShow" listener="#{timePickerController.beforeShowListener}" update="growl"/>
        <p:ajax event="close" listener="#{timePickerController.closeListener}" update="growl"/>
    </pe:timePicker>    
    <pe:timePicker value="#{timePickerController.time4}" showMinutes="false" locale="#{timePickerController.locale}"/>    
    <pe:timePicker value="#{timePickerController.time4}" showHours="false" locale="#{timePickerController.locale}"/>    
    <pe:timePicker value="#{timePickerController.time4}" mode="popup" locale="#{timePickerController.locale}"
                   onHourShow="onHourShowCallback" onMinuteShow="onMinuteShowCallback"/>
                   
    <p:commandButton id="localeButton" value="Change Locale" actionListener="#{timePickerController.changeLocale}"
                 process="@this" update="@parent" style="margin-top:10px;" icon="pi pi-save"/>
</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