Everything You Need to Know

Data Formatting


You can provide formatters different parameters to tell it how to format your data. When doing so, make sure you use double quotes. These are required inside templates because single quotes are always escaped in a template to allow for single quotes in English contractions, etc..

$.formatNumber(number, separator, decimal)

Besides passing in the number to format, you can provide a character to use for indicating thousands. The third argument is the character to represent decimals. The default is thousands separator `,`. Some cultures use `.` for thousands and `,` for decimals. To format a number for Latin America:

$.formatNumber(123456789.24312, ".", ","");
// returns: 123.456.789,24312

If you want to reduce the number of decimals displayed, you can provide the last argument as the number of decimals to show. If the value is 0, it will be rounded of to a whole number.

$.formatNumber(123456789.24312, 2);
// returns: 123,456,789.24
$.formatNumber(123456789.24312, 0);
// returns: 123,456,789


This takes an array of numbers and returns their sum:

// returns: 66.2

$.currency(amount, symbol, separator, decimal)

This method takes an amount and formats it as currency, the default is for US dollars. The second parameters is the currency symbol, The third parameter is the thousands separator. The fourth parameter is the decimal separator or rounding number.

$.currency(9123456789.2382, "$");
// returns: $9,123,456,789.24
$.currency(9123456789.99, "€", ",", 0);
// returns: €9,123,456,790


Using JavaScript, you can get the local time to format:

// Output a data:
var date = new Date();
// returns: Thu Nov 26 2015 16:30:41 GMT-0800 (PST)
// returns: November 26, 2015

// Output time:
// returns: 4:30:41 PM PST
// returns: 4:30 PM


ChocolateChip-UI's Model has the sortBy method to sort its contents. But this will not work as expected with dates. Also you may want to sort an array or model of numbers in ascending or descending order.


This function lets you sort dates. You pass it as the predicate of the sort method on arrays and models:

var today = new Date();
var date_1999 = new Date('October 30, 1999');
var date_1949 = new Date('August 20, 1949');
var date_1980 = new Date('January 1, 1980');

// Sort the dates.
// Pass '$.sortDate' as pedicate for sort method:
[today, date_1999, date_1949, date_1980].sort($.sortDate);
// returns:
1949, August
1980, January
1999, October
2015, November


This method lets you sort numbers in ascending order. It works as the predicate of the Array.sort or Model.sort methods:

var numbers = [5, 4.25, .98, 12.1, 42.98, 9.99, 1, .02, 7.5];

// Sort the numbers in ascending order.
// Pass '$.sortNumbers' as pedicate for sort method:
// returns: 


Like $.sortNumbers, you pass this as the predicate of the Array.sort or Model.sort methods:

var numbers = [5, 4.25, .98, 12.1, 42.98, 9.99, 1, .02, 7.5];

// Sort the array in descending order.
// Pass '$.sortNumbersDescending' as pedicate for sort method:
// returns: