Theme
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
id Unique identifier of the component in a namingContainer.
widgetVar Name of the client side widget.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An el expression referring to a server side UIComponent instance in a backing bean.
widgetVar Name of the client side widget.
showOn When to display the calculator: 'focus' for popup on focus, 'button' for trigger button, 'both' for either, 'operator' for non-numeric character entered, 'opbutton' for operator/button combination.
layout The layout of keys: 'standard', scientific', or a custom defined layout.
locale String or java.util.Locale representing user locale. Default is a locale specified in view root.
precision The number of digits of precision to use in rounding for display. Default is 10.
dir Defines text direction, valid values are "ltr" (default) and "rtl".
styleClass Style class of the main container element. Default value is null.
for The target input.
onopen Javascript handler to execute before a popup calculator opens and allows the field value to be altered before use.
onclose Javascript handler to execute when the calculator closes and provides the (possibly updated) field value, and the calculator instance object.
onbutton Javascript handler to execute for each activated button and provides the button's label, the current calculator value, and the calculator instance object.
Events (move mouse over the names to see classes)
Name Description
openfires when the calculator is opened
closefires when the calculator is closed
buttonfires when each calculator button is pressed
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.0,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2021-12-10 14:32
occured!