JavaScript/jQuery Localization - Using Globalize

The Globalize package is outdated and potentially unsafe.

Use Globalize at your own risk. We recommend switching to Intl for a more secure solution.

Backend API

$(() => { const dictionary = { en: { Number: 'Number', Contact: 'Contact', Company: 'Company', Amount: 'Amount', PaymentDate: 'Payment Date', }, de: { Number: 'Nummer', Contact: 'Ansprechpartner', Company: 'Firma', Amount: 'Betrag', PaymentDate: 'Zahlungsdatum', }, ru: { Number: 'Номер', Contact: 'Имя', Company: 'Организация', Amount: 'Сумма', PaymentDate: 'Дата оплаты', }, }; Globalize.loadMessages(dictionary); const locale = getLocale(); Globalize.locale(locale); const locales = [ { name: 'English', value: 'en' }, { name: 'Deutsch', value: 'de' }, { name: 'Русский', value: 'ru' }, ]; const dataGridOptions = { dataSource: payments, columns: [{ dataField: 'PaymentId', caption: Globalize.formatMessage('Number'), allowEditing: false, width: '100px', }, { dataField: 'ContactName', caption: Globalize.formatMessage('Contact'), }, { dataField: 'CompanyName', caption: Globalize.formatMessage('Company'), }, { dataField: 'Amount', caption: Globalize.formatMessage('Amount'), dataType: 'number', format: 'currency', editorOptions: { format: 'currency', showClearButton: true, }, }, { dataField: 'PaymentDate', caption: Globalize.formatMessage('PaymentDate'), dataType: 'date', }], filterRow: { visible: true, applyFilter: 'auto', }, editing: { mode: 'popup', allowUpdating: true, popup: { width: 700, height: 345, }, }, }; const selectBoxOptions = { inputAttr: { id: 'selectInput' }, dataSource: locales, displayExpr: 'name', valueExpr: 'value', value: locale, onValueChanged: changeLocale, }; function changeLocale(data) { setLocale(data.value); document.location.reload(); } function getLocale() { const storageLocale = sessionStorage.getItem('locale'); return storageLocale != null ? storageLocale : 'en'; } function setLocale(savingLocale) { sessionStorage.setItem('locale', savingLocale); } $('#gridContainer').dxDataGrid(dataGridOptions); $('#selectBox').dxSelectBox(selectBoxOptions); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr.js"></script> <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr/event.js"></script> <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr/supplemental.js"></script> <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr/unresolved.js"></script> <script src="https://cdn.jsdelivr.net/npm/globalize@1.7.0/dist/globalize.js"></script> <script src="https://cdn.jsdelivr.net/npm/globalize@1.7.0/dist/globalize/message.js"></script> <script src="https://cdn.jsdelivr.net/npm/globalize@1.7.0/dist/globalize/number.js"></script> <script src="https://cdn.jsdelivr.net/npm/globalize@1.7.0/dist/globalize/currency.js"></script> <script src="https://cdn.jsdelivr.net/npm/globalize@1.7.0/dist/globalize/date.js"></script> <script src="js/dx.all.js?v=25.1.6"></script> <script src="https://cdn3.devexpress.com/jslib/25.1.6/js/localization/dx.messages.de.js"></script> <script src="https://cdn3.devexpress.com/jslib/25.1.6/js/localization/dx.messages.ru.js"></script> <script src="https://cdn.jsdelivr.net/npm/devextreme-cldr-data@1.0.3/supplemental.js"></script> <script src="https://cdn.jsdelivr.net/npm/devextreme-cldr-data@1.0.3/de.js"></script> <script src="https://cdn.jsdelivr.net/npm/devextreme-cldr-data@1.0.3/ru.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="data-grid-demo"> <div id="gridContainer"></div> <div class="options"> <div class="caption">Options</div> <div class="option"> <label for="selectBox">Language</label> <div id="selectBox"></div> </div> </div> </div> </div> </body> </html>

.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; } .option > label { margin-right: 10px; } .option > .dx-selectbox { display: inline-block; vertical-align: middle; }

const payments = [{ PaymentId: 1, ContactName: 'Nancy Davolio', CompanyName: 'Premier Buy', Amount: 1740, PaymentDate: '2013/01/06', }, { PaymentId: 2, ContactName: 'Andrew Fuller', CompanyName: 'ElectrixMax', Amount: 850, PaymentDate: '2013/01/13', }, { PaymentId: 3, ContactName: 'Janet Leverling', CompanyName: 'Video Emporium', Amount: 2235, PaymentDate: '2013/01/07', }, { PaymentId: 4, ContactName: 'Margaret Peacock', CompanyName: 'Screen Shop', Amount: 1965, PaymentDate: '2013/01/03', }, { PaymentId: 5, ContactName: 'Steven Buchanan', CompanyName: 'Braeburn', Amount: 880, PaymentDate: '2013/01/10', }, { PaymentId: 6, ContactName: 'Michael Suyama', CompanyName: 'PriceCo', Amount: 5260, PaymentDate: '2013/01/17', }, { PaymentId: 7, ContactName: 'Robert King', CompanyName: 'Ultimate Gadget', Amount: 2790, PaymentDate: '2013/01/21', }, { PaymentId: 8, ContactName: 'Laura Callahan', CompanyName: 'EZ Stop', Amount: 3140, PaymentDate: '2013/01/01', }, { PaymentId: 9, ContactName: 'Anne Dodsworth', CompanyName: 'Clicker', Amount: 6175, PaymentDate: '2013/01/24', }, { PaymentId: 10, ContactName: 'Clark Morgan', CompanyName: 'Store of America', Amount: 4575, PaymentDate: '2013/01/11', }];

To localize components with Globalize, link modules, CLDR scripts, and DevExtreme dictionaries for the target locales. Load the CLDR data for these locales. If following a modular approach, import the necessary components. Set the current locale with the Globalize.locale method.