A newer version of this page is available.

jQuery/JS Common - utils - localization

An object that serves as a namespace for the methods that are used to localize an application.

formatDate(value, format)

Converts a Date object to a string using the specified format.

import { formatDate } from "devextreme/localization"

Parameters:

value:

Date

A Date object to be converted.

format:

Format

The format to be used for conversion.

Return Value:

String

The formatted string.

jQuery

JavaScript

var dateString = DevExpress.localization.formatDate(new Date(2018, 4, 7), "longDate");
console.log(dateString); // logs "Monday, May 7, 2018"

Angular

TypeScript

import { formatDate } from "devextreme/localization";
// ...
export class AppComponent {
    constructor() {
        let dateString = formatDate(new Date(2018, 4, 7), "longDate");
        console.log(dateString); // logs "Monday, May 7, 2018"
    }
}

formatMessage(key, value)

Substitutes the provided value(s) for placeholders in a message that the key specifies.

import { formatMessage } from "devextreme/localization"

Parameters:

key:

String

The key that identifies the message in a dictionary.

value:

String

Array<String>

One or several values used to fill placeholders in the message.

Return Value:

String

The formatted message.

jQuery

JavaScript

// Load the "greeting" message for the "en" and "es" locales
DevExpress.localization.loadMessages({
    "en": {
        "greeting": "Hello, {0} {1}!",
    },
    "es": {
        "greeting": "Hola, {0} {1}!",
    }
});

// Set the current locale to "en"
DevExpress.localization.locale("en");
console.log(DevExpress.localization.formatMessage("greeting", ["John", "Smith"])); // logs "Hello, John Smith!"

// Set the current locale to "es"
DevExpress.localization.locale("es");
console.log(DevExpress.localization.formatMessage("greeting", ["John", "Smith"])); // logs "Hola, John Smith!"

Angular

TypeScript

import { formatMessage, loadMessages, locale } from "devextreme/localization";
// ...
export class AppComponent {
    constructor() {
        // Load the "greeting" message for the "en" and "es" locales
        loadMessages({
            "en": {
                "greeting": "Hello, {0} {1}!",
            },
            "es": {
                "greeting": "Hola, {0} {1}!",
            }
        });

        // Set the current locale to "en"
        locale("en");
        console.log(formatMessage("greeting", ["John", "Smith"])); // logs "Hello, John Smith!"

        // Set the current locale to "es"
        locale("es");
        console.log(formatMessage("greeting", ["John", "Smith"])); // logs "Hola, John Smith!"
    }
}

formatNumber(value, format)

Converts a numeric value to a string using the specified format.

import { formatNumber } from "devextreme/localization"

Parameters:

value:

Number

A numeric value to be converted.

format:

Format

The format to be used for conversion.

Return Value:

String

The formatted string.

jQuery

JavaScript

var numberString = DevExpress.localization.formatNumber(0.25, "percent");
console.log(numberString); // logs "25%"

Angular

TypeScript

import { formatNumber } from "devextreme/localization";
// ...
export class AppComponent {
    constructor() {
        let numberString = formatNumber(0.25, "percent");
        console.log(numberString); // logs "25%"
    }
}

loadMessages(messages)

Loads localized messages.

import { loadMessages } from "devextreme/localization"

Parameters:

messages:

Object

The messages to be loaded.

jQuery

JavaScript

DevExpress.localization.loadMessages({
    "en": {
        "Yes": "Yes",
        "No": "No",
        // ...
    },
    "es": {
        "Yes": "Si",
        "No": "No",
        // ...
    }
});

Angular

TypeScript

import { localization } from "devextreme";
// ...
export class AppComponent {
    constructor() {
        localization.loadMessages({
            "en": {
                "Yes": "Yes",
                "No": "No",
                // ...
            },
            "es": {
                "Yes": "Si",
                "No": "No",
                // ...
            }
        });
    }
}

NOTE

It is necessary to reload the page each time you load new messages.