Different countries and regions have their own rules for writing dates, numbers and monetary units. All these issues should be taken in account in case a target group for your app is wider than one country or region.
The set of rules for this or that country is called locale and includes methods for date, time, number and price formatting. Localization methods belong to the i18n class and treat data according to he set format.
By default Date() constructor outputs raw data. Unformatted, it looks barely readable.
new Date(2012,10,30); //-->Tue Nov 30 2010 00:00:00
Date and time should be formatted either with Date or i18n class.
Numbers differ by delimiter before the fractional part and between thousands while prices should be rendered with an appropriate currency mark. Formatting is done either in the Number or i18n class.
The standard package of the Webix library includes 9 locales, namely:
Webix Pro edition includes over 300 locales to match a great variety of cultures.
The way formatted date is presented depends on locale you use. Locale is a set of rules for dates, numbers and price units for this or that region or country. By default en-US locale is used.
en-US Locale
webix.i18n.locales["en-US"]={
groupDelimiter:",",
groupSize:3,
decimalDelimiter:".",
decimalSize:2,
dateFormat:"%m/%d/%Y",
timeFormat:"%h:%i %A",
longDateFormat:"%d %F %Y",
fullDateFormat:"%m/%d/%Y %h:%i %A",
price:"${obj}",
priceSettings:{
groupDelimiter:",",
groupSize:3,
decimalDelimiter:".",
decimalSize:2
},
fileSize: ["b","Kb","Mb","Gb","Tb","Pb","Eb"],
calendar: {
monthFull:["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
],
monthShort:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
"Sep", "Oct", "Nov", "Dec"
],
dayFull:["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday"
],
dayShort:["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
hours: "Hours",
minutes: "Minutes",
done:"Done",
clear: "Clear",
today: "Today"
},
controls:{
select:"Select"
}
};
Numbers:
Date and Time:
Start Date:
By default, a week in the calendar starts on Sunday. However, you can set any day as a start day using the webix.Date.startOnMonday property
webix.Date.startOnMonday = true;
Price states monetary unit applied to the data from data object ({obj}).
Calendar:
When formatted to a short/long date, the date from the first snippet looks like this:
Formatted with en-US locale
format:webix.i18n.dateFormatStr
//--> 11/30/2010
format:webix.i18n.longDateFormatSt
// --> 30 November 2010
Controls
Text labels for some parts of webix components that are more likely to be changed in a scope:
Locales other than en-US should be set manually. It can be done with the help of a setLocale() function that takes locale name as parameter.
webix.i18n.setLocale("fr-FR");
After this any method applied to the webix.i18n object will redraw date, and numbers according to the rules described in locale.
Formatted with fr-FR locale
format:webix.i18n.dateFormatStr
// -->30/11/2010
format:webix.i18n.longDateFormatStr
// --> 30 Novembre 2010
To change one or several parameters for the current locale, you need to redefine them and then apply the same locale so that your changes come into force:
webix.i18n.fullDateFormat = "%Y-%m-%d %H:%i";
webix.i18n.setLocale(); //locale name is not specified here
Localization is done via the i18n class and allows setting customized formats gathered under one and the same locale.
In case of datatable, format is stated by the dedicated format parameter while data is specified by column ID:
{ header:"Date", id:"start", format:webix.i18n.dateFormatStr},
{ header:"Price", id:"price", format:webix.i18n.priceFormat}
Related sample: Internationalization
Other components like list, dataview and Tree have quite the other way of data presenting. To ensure proper formatting, you should make use of a template function:
template:function(obj){
return webix.i18n.longDateFormatStr(obj.start)+"<br/>"+
webix.i18n.priceFormat(obj.price);
}
The format in use is defined by current locale. EN-US (default) locale sets dateFormatStr as "%m/%d/%Y" while price format is set as "{obj}currency" where obj is price value.
Related sample: Dataview Formatting
Back to top