arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
Calculator
Calculator can be localised for other languages. Select a language to change the text and tooltips.

RTL (Right To Left) is also supported!
Source

<h:panelGrid columns="6" id="pnlDetails">
        <p:outputLabel value="Locale:" for="cboLocale" />
        <p:selectOneMenu id="cboLocale" value="#{calculatorController.language}" style="width:200px" required="true">
            <f:selectItems value="#{calculatorController.languages}" />
            <p:ajax update="pInputText" process="@this"/>
        </p:selectOneMenu>

        <p:outputLabel value="RTL:" for="chkRtl" />
        <p:selectBooleanCheckbox id="chkRtl" value="#{calculatorController.rtl}">
            <p:ajax update="pInputText" process="@this"/>
        </p:selectBooleanCheckbox>

        <p:outputLabel value="Calc:" for="pInputText" />
        <p:inputText id="pInputText" value="#{calculatorController.pInputText}">
            <pe:calculator dir="#{calculatorController.rtl ? 'rtl' : 'ltr'}" locale="#{calculatorController.language}" showOn="both"/>
        </p:inputText>
    </h:panelGrid>
            
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-07 01:34