🎨 jQuery Calx - Formatters Example

About Formatters: This example demonstrates the built-in formatters (currency, percent, number, integer, text), input-mask behavior, and conditional styling with smart parsing.

Basic Formatters

💰 Currency Formatter

Enter Amount:

Try typing: 5000, $500, 123.45, or $1234

Formatted (currency) focus/blur:

Click to see raw value, blur to see formatted

Display Output:

📊 Percent Formatter

Enter Percent:

Try typing: 15 (becomes 15.00%), 15%, or 0.15

Formatted (percent) focus/blur:

Multiplies by 100 and adds %

Display Output:

🔢 Number Formatter

Enter Number:

Try: 99.999 or 3.14159

Formatted (number) focus/blur:

Rounds to 2 decimal places

Display Output:

🎯 Integer Formatter

Enter Number:

Try: 50.5 or 99.4

Formatted (integer) focus/blur:

Rounds to whole number

Display Output:

📝 Text Formatter

Enter Any Value:

Try: text, numbers, or mixed

Formatted (text) focus/blur:

Converts to string

Display Output:

Real-World Example: Shopping Cart

🛒 Product 1

Price:

Quantity:

Subtotal:

🛒 Product 2

Price:

Quantity:

Subtotal:

💳 Totals

Items Subtotal:

Tax Rate:

Tax Amount:

Grand Total:

Conditional Styling Example: Profit/Loss

📊 Month 1

Revenue:

Expenses:

Profit/Loss conditional:

Negative values show in red

📊 Month 2

Revenue:

Expenses:

Profit/Loss conditional:

Try changing revenue to see red/black colors

💰 Total

Total Revenue:

Total Expenses:

Net Profit/Loss conditional:

Red = Loss, Black = Profit

Financial Example: Loan Calculator

💰 Loan Details

Loan Amount:

Annual Interest Rate:

Loan Term (years):

📈 Monthly Payment

Monthly Rate:

Annual rate ÷ 12

Number of Payments:

Years × 12

Monthly Payment:

Using PMT function

💵 Total Cost

Total Paid:

Monthly payment × number of payments

Total Interest:

Total paid - principal

Interest as % of Loan:

💡 How to Use

Type freely: For currency, type 2, $2, or $2.00 - all become $2.00 when you blur
For percents: Type 15, 15%, or 0.15 - all work! The formatter handles it
Named variables: Use data-var="TAX" to create named variables that can be referenced in formulas
Edit easily: Click on an input to see the raw value for easy editing
Automatic calculation: All dependent cells update automatically when you change values
Mix formatters: Different cells can use different formatters

📚 Code Example

Here's how to use formatters with input-mask behavior:

<!-- Currency input with mask - accepts 2, $2, $2.00 -->
<input data-cell="A1" value="1234.56" data-format="currency">

<!-- Named variable using data-var -->
<input data-cell="B1" data-var="TAX" value="0.08" data-format="percent">

<!-- Use the named variable in formulas -->
<input data-formula="A1*TAX" data-format="currency" readonly>

<!-- Percent input with mask - accepts 15, 15%, 0.15 -->
<input data-cell="A2" value="0.08" data-format="percent">

<!-- Readonly calculated field with formatting -->
<input data-formula="A1*1.08" data-format="currency" readonly>

<!-- Display-only element -->
<div data-formula="A1*A2" data-format="currency"></div>

<!-- Initialize Calx -->
<script>
$('#myform').calx({
    autoCalculate: true
});
</script>

🎨 Available Formatters

currency - Formats as $1,234.56 with thousand separators. Accepts: 1234.56, $1234.56, $1,234.56
percent - Formats as 12.34%. Accepts: 0.1234, 12.34, 12.34%
number - Formats with 2 decimal places (123.46). Accepts any numeric input
integer - Rounds to whole number (100). Accepts any numeric input
text - Converts to string representation

Input-mask feature: All formatters intelligently parse your input, so you can type naturally!

Custom formatters: You can register your own formatters with parse() and format() methods!

🎨 Conditional Styling (Style Formatters)

Apply CSS styles based on cell values using data-style-if attribute:

negative - Applies red color when value < 0
positive - Applies green color when value > 0
zero - Applies gray color when value = 0

Example:

<!-- Show negative profit in red -->
<input data-formula="REVENUE-EXPENSES"
       data-format="currency"
       data-style-if="negative"
       readonly>

Custom style formatters: Register your own via JavaScript!

$('#myform').calx({
    styleFormatters: {
        warning: function(value, $element) {
            if (value > 1000) {
                return {
                    color: 'orange',
                    fontWeight: 'bold'
                };
            }
            return {};
        }
    }
});