Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
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
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-2023,PrimeFaces: 14.0.5,PrimeFaces Extensions: 14.0.5,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2024-09-10 21:01