Formatting
jQuery Calx depends on numeral.js
for output formatting. In jQuery Calx version 1.x , numeral is integrated into the core, but no longer integrated in jQuery Calx 2.x and listed as dependency, you need to load it before loading jQuery Calx if you need the formatting feature.
Setting up locale
In jQuery Calx 1.x, locale settings are defined inside the jQuery Calx configuration, since jQuery Calx 2 no longer integrated with numeral.js, local settings are defined in numeral config
// load a language numeral.language('fr', { delimiters: { thousands: ' ', decimal: ',' }, abbreviations: { thousand: 'k', million: 'm', billion: 'b', trillion: 't' }, ordinal : function (number) { return number === 1 ? 'er' : 'ème'; }, currency: { symbol: '€' } }); // switch between languages numeral.language('fr');
Formatting Value
Cell value formatting is defined in the data-format
attribute using pre-defined rule, below is example of how to format the cell value and list of available formatting rules.
Formatting Number
Since Calx use Numeral.JS in it’s core, it is use format syntax from Numeral.JS . Documentation below was borrowed from Numeral.JS documentation. Use dollar sign [$] to display currency symbol, comma[,] as thousand separator, and dot [.] as decimal separator, regardless of currency symbol, thousands separator, and decimal separator in language configuration, Calx will replace it automatically.
Thanks to Adam Drapper for creating Numeral.JS https://github.com/adamwdraper/Numeral-js
Numbers
Number | Format | String |
---|---|---|
10000 | ‘0,0.0000’ | 10,000.0000 |
10000.23 | ‘0,0’ | 10,000 |
-10000 | ‘0,0.0’ | -10,000.0 |
10000.1234 | ‘0.000’ | 10000.123 |
10000.1234 | ‘0[.]00000’ | 10000.12340 |
-10000 | ‘(0,0.0000)’ | (10,000.0000) |
-0.23 | ‘.00’ | -.23 |
-0.23 | ‘(.00)’ | (.23) |
0.23 | ‘0.00000’ | 0.23000 |
0.23 | ‘0.0[0000]’ | 0.23 |
1230974 | ‘0.0a’ | 1.2m |
1460 | ‘0 a’ | 1 k |
-104000 | ‘0a’ | -104k |
1 | ‘0o’ | 1st |
52 | ‘0o’ | 52nd |
23 | ‘0o’ | 23rd |
100 | ‘0o’ | 100th |
Currency
Number | Format | String |
---|---|---|
1000.234 | ‘$0,0.00’ | $1,000.23 |
1000.2 | ‘0,0[.]00 $’ | 1,000.20 $ |
1001 | ‘$ 0,0[.]00’ | $ 1,001 |
-1000.234 | ‘($0,0)’ | ($1,000) |
-1000.234 | ‘$0.00’ | -$1000.23 |
1230974 | ‘($ 0.00 a)’ | $ 1.23 m |
Bytes
Number | Format | String |
---|---|---|
100 | ‘0b’ | 100B |
2048 | ‘0 b’ | 2 KB |
7884486213 | ‘0.0b’ | 7.3GB |
3467479682787 | ‘0.000 b’ | 3.154 TB |
Percentages
Number | Format | String |
---|---|---|
1 | ‘0%’ | 100% |
0.974878234 | ‘0.000%’ | 97.488% |
-0.43 | ‘0 %’ | -43 % |
0.43 | ‘(0.000 %)’ | 43.000 % |
Time
Number | Format | String |
---|---|---|
25 | ’00:00:00′ | 0:00:25 |
238 | ’00:00:00′ | 0:03:58 |
63846 | ’00:00:00′ | 17:44:06 |
How can format ratio?
Hello!
Is there way, how to make form with ? Cause, when I use number input type, it dont save/calculate result!
Hi Haro,
Sorry, it is indeed known issue and still unresolved for now.
Hi there.
Thank you so much for making this available. It is just what I needed to create an order form for my workplace.
Great work.
Glad it helps! 🙂
Hello,
I have been trying to get the numbers (comma and point) straight but I can’t get it right! If I type in 1,5 in cel A1 and 2,8 into A2 then the result is 3. If I type 1.5 and 2.8 the result is 4.3 and I can’t get it to work and give me 4,3
Can you give me a hint??
Thanks, Jo
Hi, is there a way to use a suffix in data-format?, something like this data-format=”(0.0) pp”, result should be something like 1.1 pp or (1.1) pp
I know you are using numeral.js to format data, but I can’t find a solution.
Regards
After a while I found a solution (maybe is not the best but works):
1. I added a data-preffix in my element
2. I use the setConditionalStyle to validate if data-preffix exists and then change the value (concatenating the value and data-preffix value).
If you have a better option, please let me know to improve my code.
Regards
Hi,
I really like your product; however I notice there is a problem similar to Mr-anonymous September 2, 2015 at 10:22 pm. When I configure the page for French and I click into a cell, the comma changes for a period. If the user does not explicitly change the period back to a comma, the decimal is removed when leaving the cell.
I include my code that demonstrates the problem, and thank you for your great work:
// load a language
numeral.language('fr', {
delimiters: {
thousands: ' ',
decimal: ','
},
abbreviations: {
thousand: 'k',
million: 'm',
billion: 'b',
trillion: 't'
},
ordinal : function (number) {
return number === 1 ? 'er' : 'ème';
},
currency: {
symbol: '€'
}
});
numeral.language('fr');
//
Halo mas bro,
Untuk memformat angka dengan format angka scientific kenapa ndak berhasil yah kalau untuk output? misal saya punya output 0.001478 yang saya kehendaki 1.478E-3. Saya sudah makai data-format=”0.00E+00″ hasilnya tetap bentuk 0.001478. Mohon penjelasan agar output saya ngikuti format yg telah ditetapkan.
Matur nuwun.
Hello
I am having trouble with % values. And I believe I found a bug (note this is on the latest version of calx.
depending on the order in which things happen the end result is different:
S is the sheet
1. s.getCell(‘N56’)..setValue(0.35).setFormat (‘0 %’) -> Value is set to 0.35 and displays as 35%. This is perfect.
2. s.getCell(‘N56’)..setFormat (‘0 %’).setValue(0.35) -> Value is set to 0.0034999999 and displays as 0% (this is wrong)
When creating a spreadsheet it is the version 2 which obviously happens. I think it is in any case wrong to modify the value which is passed.
As a short term workaround, once the spreadsheet is created, I loop on every cell with a % format and wipe out for format, modify the value (* 100) the reapply the format.
data-format 0.00% values = 0.35 display = 0.35 %
data-format 0.% values = 0.35 display = 0 %
In fact in the developer tools when I set the value manually (via setValue on the cell) to 0.35 the value recorded is 0.003499999999
Note: I use the latest version of Calx.
Hi Didier,
Thanks!, I’ll take a look and fix it asap
Regards,
Ikhsan
Hello Iksan
Any luck ? or should I implement my work around, I have got a big demo on Friday … and would like to know asap
Thanks
Didier
Hi Didier,
it should be fixed in the new 2.2.7 release, please kindly test it
Regards,
Ikhsan
Ikhsan
Apologies for taking so long to repond, I had to work full time delivering software including
Yes your fix in 2.2.7 works fine, thank you very much;
As soon as we get a payment from my client I’ll make sure my company sends a donation your way your work is brilliant!
Is there any way to talk to you privately ?
Hi Didier,
glad to hear that :), you can contact us directly via developers@xsanisty.com
Regards,
Ikhsan
Including liike this:
use data-format=”0[,][.]”
but In table there are commas (,) (ex: 100,000,000) as thousand separator , not spaces which described in numeral.language settings/. (100 000 000)
But then I click on my input , it gets right format (100 000 000)
Hi Oleg,
your data format should be 0,0[.]0
but there is still small glitch in the formatting on an editable field.
Hi Iksan,
I have a little problem. I have formatted the data with the french language, like this
numeral.language(‘fr’, {
delimiters: {
thousands: ‘ ‘,
decimal: ‘,’
},
Everything is working with my formula, but there is a little problem.
The dot is not supposed to be considered, but when somebody type 1.23 instead of 1,23 it writes 123,00
How can i fix this ? Is it possible to define both dot and comma as decimal delimiters ?
Anyway, thank you for your plugin
Hi Mr. Anonymous,
Yes, I am aware with this issue, but I am currently have time difficulty to properly fix this issue, will try to allocate my time this weekend.
Hi Ikhsan,
Did you have time to fix the issue ?
I had the same problem, which stems from numeral.js, more precisely from this line:
string = string.replace(/\./g,'').replace(languages[currentLanguage].delimiters.decimal, '.');
which I personally replaced by:
string = string.replace(languages[currentLanguage].delimiters.decimal, '.');
and everything is fine. The only question one has to ask himself before doing this is wether there is any chance to meet a ‘.’ that is not intended as a decimal separator; if the answer is no, then I don’t see any problem.
Is there any way to let me set scales for format? Thanks!
Alexis,
I am a bit unclear about your question, could you provide some details?
Trying to bring up the numeric keypad on mobile devices. In HTML using type=”number” works fine, until I add formatting for currency or percentage. Then calx2 no longer holds the input. Seems to work on iOS devices if I set type=”text” and pattern=”[0-9]*”, but this does not trigger the Android numeric keypad. “pattern” seems iOS specific.
Do you have any suggestions for triggering mobile numeric keypads with calx2 cells containing numeric formatting (currency or percent?)
Thanks!!
If the numeral setting is set, used Fr, from the example, looks like it does overwrite a selected value from a select menu: How can I solve this? Thank you!
Hi,
I set my format to
format =>"0,0.00"}
and use the dutch numeral.js when i focus the input field it changes from 1,05 to 1.05 when i cahnge field it changes to value to 105.any suggestions?
Hi Wouter,
It seems a bug on calx, will try to inspecting it and recreate the issue on my side
regards
Ikhsan
Kayak gini ini gak bisae mas, maklum ora ngerti blas, mohon petunjuke;
// load a language
$ numeral.language('fr', {delimiters: {thousands: ' ',decimal: ','}, abbreviations: {thousand: 'k',million: 'm', billion: 'b',trillion: 't'}, ordinal : function (number) {return number === 1 ? 'er' : 'ème';},currency: { symbol: '€'}
})
Kayak gini ini gak bisae mas, maklum ora ngerti blas, mohon petunjuke;
// load a language
$ numeral.language(‘fr’, {delimiters: {thousands: ‘ ‘,decimal: ‘,’}, abbreviations: {thousand: ‘k’,million: ‘m’, billion: ‘b’,trillion: ‘t’}, ordinal : function (number) {return number === 1 ? ‘er’ : ‘ème’;},currency: { symbol: ‘€’}
})
Mas Bro itu load language-nya di taruh di bagian mana? Trus kalau untuk bahasa indonesia (id) gimana tuh ngaturnya, makasih.
itu ditaroh setelah numeral.js, sebelum calx.js
Hi,
We have troubles to format the data to french numeral’s configuration. Can you tell us how to do please?
Does the data-format not work with the forumla cell?
I’m trying to return the results withonly 1 decimal place, and It will not format it.
Hi Zach,
data-format should works everywhere inside the calx-container,
<input data-formula="SOMEFORMULA()" data-format="0.0" />
or you can use ROUND if it doesn’t work
<input data-formula="ROUND(C1, 1)">
http://sarahsavings.com/
Enter, 2, 6, 150, 1000 in order through the fields.
Still getting many decimals. maybe I am doing something wrong?
Yup, you should include numeral first, and jquery-calx later 🙂
I used the round and it worked great.
Sorry for all the messy comments, feel free to delete them since they have so many errors.
Have a good day. Thank you for your help!
lol, I also have no idea how wordpress comment system works 😀
I see somewhere in your code
that should works as expected