Naughty Pinching Mannequins

    jquery-price-format

    0.0.1 • Public • Published

    Jquery-Price-Format

    license GitHub issues Codacy Badge

    jQuery Price Format Plugin is useful to format input fields and HTML elements as prices. For example, if you type 123456, the plugin updates it to US$ 1,234.56.

    Yes, we also have a prototype version but it is out of maintenace.

    It is costumizable, so you can use other prefixes, separators, suffixes, plus sign, minus sign and so on. Check out the examples below.

    Example 1 - Basic Usage

    This is the most basic usage. It loads default options: use US$ as prefix, a comma as thousands separator and a dot as cents separator.

    $('#example1').priceFormat();
    
    // US$ 1,234.56
    

    Example 2 - Use with any HTML element

    The same basic usage as above, but now using an HTML id. Try it with classes also.

    $('#htmlfield').priceFormat();
    

    Example 3 - Customize

    This is a costumized format like brazilians use: R$ as prefix, a dot as cents separator and a dot as thousands separator. Play with the options centsSeparator and/or thousandsSeparator to better fit your site.

    $('#example2').priceFormat({
      prefix: 'R$ ',
      centsSeparator: ',',
      thousandsSeparator: '.'
    });
    
    // R$ 1.234,56
    

    Example 4 - Skipping some option

    You can skip some of the options (prefix, centsSeparator and/or thousandsSeparator) by set them blank as you need it in your UI.

    $('#example3').priceFormat({
    	prefix: '',
    	thousandsSeparator: ''
    });
    
    // 1234.56
    

    Example 5 - Working with limits

    You can set a limited length (limit) or change the size of the cents field (centsLimit) to better fit your needs.

    $('#example5').priceFormat({
      clearPrefix: true
    });
    
    // US$ 12.345
    

    Example 6 - Clear Prefix and Suffix on Blur

    The default value of clearPrefix and clearSuffix is false. Both work in same way.

    $('#example5').priceFormat({
      clearPrefix: true
    });
    
    // 1,234.56
    // on Blur > US$ 1,234.56
    

    Example 7 - Allow Negatives

    The default value of allowNegative property is false. Zero values will not be negative.

    $('#example6').priceFormat({
      allowNegative: true
    });
    
    // US$ -1,234.56
    

    Example 8 - Add Suffix

    The default value of suffix is empty.

    $('#example7').priceFormat({
      prefix: '',
      suffix: '€'
    });
    
    // 1,234.56€
    

    Exemplo 9 - Unmask function

    Return the value without mask. Negative numbers will return the minus signal.

    $('#example8').priceFormat();
    var unmask = $('#example8').unmask();
    alert(unmask); // alert 123456
    

    Exemplo 10 - Plus sign

    Sometimes show the plus sign can improve your usability. Since you allow this option you will automaticly allow the use of the minus sign.

    $('#example9').priceFormat({
      prefix: '',
      thousandsSeparator: '',
      insertPlusSign: 'true'
    });
    
    // +1234.56

    Keywords

    none

    Install

    npm i jquery-price-format

    DownloadsWeekly Downloads

    309

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • gustavobissolli