arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
Calculator
Calculator can be used to attach a popup calculator on specified input components. Examples below include h:inputText, p:inputText, and p:inputNumber components.

It can be embedded right in an input component or externally configured using the for="target" notation.
Calculator with defaults on h:inputText
Calculator scientifc layout on a p:inputText
Calculator with button on a p:inputNumber
Source

                <h:panelGrid columns="2">   
        <h:outputText value="Calculator with defaults on h:inputText"/>   
        <h:inputText id="hInputText" value="#{calculatorController.hInputText}">
            <pe:calculator/>
        </h:inputText> 
 
        <h:outputText value="Calculator scientifc layout on a p:inputText"/>   
        <p:inputText id="pInputText" value="#{calculatorController.pInputText}">
            <pe:calculator layout="scientific"/>
        </p:inputText> 
 
        <h:outputText value="Calculator with button on a p:inputNumber" /> 
        <p:inputNumber id="pInputNumber"  value="#{calculatorController.pInputNumber}" symbol=" $USD" symbolPosition="s" 
                               decimalSeparator="." thousandSeparator="," decimalPlaces="2" /> 
</h:panelGrid>

<pe:calculator for="pInputNumber" showOn="both" precision="2"/>
            
Components and more
Documentation pe:calculator
Attributes (move mouse over the names to see data types)
Name Description
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
dirDefines text direction, valid values are ltr and rtl.Default is ltr.
forSearch expression for the target input component to attach the calculator to.
idUnique identifier of the component in a namingContainer.Default is generated.
layoutLayout of the calculator: 'standard' or 'horizontal'.Default is standard.
localeLocale for number formatting. Can be a string or java.util.Locale instance.
onbuttonClient-side callback when a calculator button is activated.
oncloseClient-side callback when the calculator panel is closed.
onopenClient-side callback when the calculator panel is opened.
precisionDecimal precision (number of decimal places).Default is 10.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
showOnWhen to show the calculator: 'focus', 'button', or 'both'.Default is focus.
styleInline style of the component.
styleClassStyle class of the component.
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-11 11:42