У каждой страны или региона свои языковые особенности, форматы дат, чисел, валюты и т.д. Все эти нюансы необходимо учитывать, если пользователи вашего приложения не сосредоточены в одной стране или регионе.
Набор правил для той или иной страны называется locale, который включает в себя методы для дат, времени, чисел, валюты и форматирования их ярлыков
Методы локализации находятся в классе i18n и обрабатывают данные согласно указанному формату.
По умолчанию конструктор Date() выводит необработанные данные, которые неудобно читать.
new Date(2020,10,30); //-->Tue Nov 30 2020 00:00:00
Вы можете форматировать дату и время через модуль Date или класс i18n.
Изучите полный список методов форматирования дат и поддерживаемых форматов.
У десятичных и целых чисел свой разделитель, в зависимости от особенностей страны. Например, цены следует показывать с определёнными валютными знаками.
Форматирование чисел происходит через модуль Number или класс i18n.
Стандартный пакет библиотеки Webix включает в себя 10 локалей:
В пакете Webix Pro доступно более 300 локалей.
То, в каком виде отображаются отформатированные данные зависит от текущей локали. По умолчанию выбрана en-US локаль.
en-US локаль
webix.i18n.locales["en-US"]={
groupDelimiter:",",
groupSize:3,
decimalDelimiter:".",
decimalSize:2,
minusPosition:"before",
minusSign:"-",
dateFormat:"%m/%d/%Y",
timeFormat:"%h:%i %A",
longDateFormat:"%d %F %Y",
fullDateFormat:"%m/%d/%Y %h:%i %A",
am:["am","AM"],
pm:["pm","PM"],
price:"${obj}",
priceSettings:{
groupDelimiter:",",
groupSize:3,
decimalDelimiter:".",
decimalSize:2,
minusPosition:"before",
minusSign:"-",
},
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"
},
dataExport:{
page:"Page",
of:"of"
},
PDFviewer:{
of:"of",
automaticZoom:"Automatic Zoom",
actualSize:"Actual Size",
pageFit:"Page Fit",
pageWidth:"Page Width",
pageHeight:"Page Height",
enterPassword:"Enter password",
passwordError:"Wrong password"
},
aria:{
calendar:"Calendar",
increaseValue:"Increase value",
decreaseValue:"Decrease value",
navMonth:["Previous month", "Next month"],
navYear:["Previous year", "Next year"],
navDecade:["Previous decade", "Next decade"],
dateFormat:"%d %F %Y",
monthFormat:"%F %Y",
yearFormat:"%Y",
hourFormat:"Hours: %h %A",
minuteFormat:"Minutes: %i",
removeItem:"Remove item",
pages:["First page", "Previous page", "Next page", "Last page"],
page:"Page",
headermenu:"Header menu",
openGroup:"Open column group",
closeGroup:"Close column group",
closeTab:"Close tab",
showTabs:"Show more tabs",
resetTreeMap:"Reset tree map",
navTreeMap:"Level up",
nextTab:"Next tab",
prevTab:"Previous tab",
multitextSection:"Add section",
multitextextraSection:"Remove section",
showChart:"Show chart",
hideChart:"Hide chart",
resizeChart:"Resize chart"
},
richtext:{
underline: "Underline",
bold: "Bold",
italic: "Italic"
},
combo:{
select:"Select",
selectAll:"Select all",
unselectAll:"Unselect all"
},
message:{
ok:"OK",
cancel:"Cancel"
},
comments:{
send: "Send",
confirmMessage: "The comment will be removed. Are you sure?",
edit: "Edit",
remove: "Remove",
placeholder: "Type here..",
moreComments:"More comments"
},
filter:{
less: "less",
lessOrEqual: "less or equal",
greater: "greater",
greaterOrEqual: "greater or equal",
contains: "contains",
notContains: "not contains",
equal: "equal",
notEqual: "not equal",
beginsWith: "begins with",
notBeginsWith: "not begins with",
endsWith: "ends with",
notEndsWith: "not ends with",
between: "between",
notBetween: "not between"
},
timeboard:{
seconds: "Seconds"
}
};
Числа:
Дата и время:
Начало недели:
По умолчанию неделя в календаре начинается с воскресенья. Однако вы можете указать любой день в качестве начала недели с помощью свойства webix.Date.startOnMonday.
webix.Date.startOnMonday = true;
Валюта задаёт денежную единицу для данных из объекта ({obj}).
Календарь:
При форматировании сокращённых/полных дат, дата из первого примера выглядела бы так:
Форматирование с en-US локалью
format:webix.i18n.dateFormatStr
//--> 11/30/2010
format:webix.i18n.longDateFormatSt
// --> 30 November 2010
Контролы
Ярлыки для некоторых частей Webix компонентов, которые вероятнее всего изменяются. Например:
Экспорт данных
Ярлыки, которые используются в нумерации страниц, в футере экспортируемого PDF документа:
PDF Viewer
Ярлыки для переключения страниц и опции документа в PDF Viewer:
Aria
Текстовые ярлыки для интерактивных областей, свойства которых нельзя настроить через публичное API. Эти ярлыки указываются как атрибут aria-label и используются устройствами для чтения с экрана (оглашают цель текущего элемента):
RichText
Ярлыки для стилизации шрифта кнопок в контроле RichText:
Combo
Ярлыки для кнопок в элементах selecting/unselecting:
Message
Ярлыки для кнопок в модальных окнах:
Comments
Ярлыки для кнопок и контекстного меню в виджете Comments:
Как уже говорилось ранее локаль en-US указана по умочланию. Любая другая задаётся вручную.
С помощью метода setLocale() вы можете указать новую локаль. Метод принимает имя локали в качестве параметра.
webix.i18n.setLocale("fr-FR");
После того, как вы указали новую локаль, методы объекта webix.i18n будут перерисовывать даты и числа в соответствии с правилами этой локали.
format:webix.i18n.dateFormatStr
// --> 30/11/2010
format:webix.i18n.longDateFormatStr
// --> 30 Novembre 2010
Чтобы изменить один или несколько параметров текущей локали, вам необходимо переопределить их и затем задать эту же локаль, чтобы изменения вступили в силу:
webix.i18n.fullDateFormat = "%Y-%m-%d %H:%i";
webix.i18n.setLocale(); // имя локали не указано
Локализация возможна благодаря классу i18n, который позволяет указывать форматы, объединённые одной и той же локалью.
В случае с DataTable, формат задаётся через свойство format, а данные определяются через ID столбца:
{ header:"Date", id:"start", format:webix.i18n.dateFormatStr},
{ header:"Price", id:"price", format:webix.i18n.priceFormat}
Related sample: DataTable Localization
У других компонентов (List, DataView and Tree) процесс отображения данных отличается. Чтобы обеспечить корректное форматирование, используйте функцию-темплейт:
template:function(obj){
return webix.i18n.longDateFormatStr(obj.start)+"<br/>"+
webix.i18n.priceFormat(obj.price);
}
Текущий формат определяется текущей локалью. Исходная локаль EN-US задаёт dateFormatStr как "%m/%d/%Y", а формат валюты как "{obj}currency", где obj это значение валюты.
Related sample: Dataview Formatting
Наверх