Alpine JS

Alpine JS

Show amount of money in Indian rupees as K / Lakhs / Crores

Anjanesh Lekshminarayanan's photo
Anjanesh Lekshminarayanan
·Aug 22, 2022·

2 min read

Show amount of money in Indian rupees as K / Lakhs / Crores

The method to convert a number to Indian currency as K / lakhs / crores is at : anjanesh.dev/returning-amount-of-money-in-i..

Here's the JavaScript equivalent using Intl.NumberFormat which is JavaScript's equivalent to PHP's number_format:

const INR_THOUSAND = 1000;
const INR_LAKH = 100 * INR_THOUSAND;
const INR_CRORE = 100 * INR_LAKH;

const formatter = new Intl.NumberFormat('en', { minimumFractionDigits: 0, maximumFractionDigits: 2 });

function amountInINR(amount)
{
    INR = amount;
    ext = "";

    if (amount > INR_CRORE)
    {
        INR = amount / INR_CRORE;
        ext = INR == 1 ? "crore" : "crores";
        INR = formatter.format(amount / INR_CRORE, 2) + ' ' + ext;
    }
    else if (amount > INR_LAKH)
    {
        INR = amount / INR_LAKH;
        ext = INR == 1 ? "lakh" : "lakhs";
        INR = formatter.format(amount / INR_LAKH, 2) + ' ' + ext;
    }
    else if (amount > INR_THOUSAND)
    {
        INR = amount / INR_THOUSAND;
        ext = INR == 1 ? "lakh" : "K";
        INR = formatter.format(amount / INR_THOUSAND, 2) + ' ' + ext;
    }    
    else
    {
        INR = formatter.format(amount, 2);
    }

    return INR;
}

The AlpineJS's template :

<div x-data="{ indian_amount: '' }">
  <input type="text" name="amount" required id="amount" x-model="indian_amount" />
  &nbsp;<span x-text="amountInINR(indian_amount)"></span>
</div>

Full Demo - anjanesh.s3.amazonaws.com/demo/alpine/x-mod..

Update : Intl.NumberFormat has the option to get INR out of it but the notation display is a bit different - for example, thousands is represented as T and not K - and this does not work in Safari (version 14 is what I tested it on).

let amountInINR = (amount) =>
{
    return new Intl.NumberFormat("en-IN", {
      style: "currency",
      currency: "INR",
      notation: "compact",
      compactDisplay: "long"
    }).format(amount);
}
  • 36000 will return ₹36T
  • 36000000 will return ₹3.6Cr
  • 36000000000 will return ₹3.6TCr

Thanks to this StackOverflow answer, .replace() is easiest to implement.

let amountInINR = (amount) =>
{
    return new Intl.NumberFormat("en-IN", {
      style: "currency",
      currency: "INR",
      notation: "compact",
      compactDisplay: "long",      
    }).format(amount).replace('T', 'K').replace('L', ' lakhs').replace('Cr', ' Crores');
}
 
Share this