RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/Common/Localization/ below:

DevExtreme Vue - Localization | Vue Documentation

DevExtreme Vue - Localization

Localization adapts your application to linguistic and regional differences. DevExtreme allows you to localize:

Messages (using dictionaries)
Numbers, dates, and currencies (using Intl or Globalize).

DevExtreme also supports right-to-left layout.

NOTE

Refer to the

Intl

and

Using Globalize

articles if you are localizing DevExtreme ASP.NET MVC Controls.

Dictionaries

Dictionaries contain localized strings for different languages. The strings are key/value pairs and are shipped as JavaScript or JSON files (depending on the package you use).

All dictionaries are contributed and curated by the community. The list of dictionaries is available on GitHub.

jQuery

You can find all the dictionaries on your local machine in the DevExtreme installation folder's or ZIP archive's Lib\js\localization directory. These dictionaries are also available on CDN.

Use the <script> tag to link the required dictionaries, and place the links after a link to the DevExtreme library:

<head>
    <!-- ... -->
    <!-- DevExtreme library -->
    <script src="https://cdn3.devexpress.com/jslib/25.1.4/js/dx.all.js"></script>
    <!-- Dictionary files for German language -->
    <script src="https://cdn3.devexpress.com/jslib/25.1.4/js/localization/dx.messages.de.js"></script>
</head>
<body>
    <script>
        DevExpress.localization.locale(navigator.language);
        // ...
        // DevExtreme UI components are configured here
        // ...
    </script>
</body>

Angular

You can find all the dictionaries on your local machine in the DevExtreme installation folder's or ZIP archive's Lib\js\localization directory. These dictionaries are also available on npm.

Include the dictionaries using the import or require statement the statement depends on the syntax for working with modules. The following code shows ECMAScript 6 and CommonJS syntaxes:

// ...
// Dictionaries for German language
import deMessages from "devextreme/localization/messages/de.json";
import { locale, loadMessages } from "devextreme/localization";

export class AppComponent {
    constructor() {
        loadMessages(deMessages);
        locale(navigator.language);
    }
}

// ...
// Dictionaries for German language
const deMessages = require('devextreme/localization/messages/de.json');
const localization = require('devextreme/localization');

localization.loadMessages(deMessages);
localization.locale(navigator.language);

Vue

You can find all the dictionaries on your local machine in the DevExtreme installation folder's or ZIP archive's Lib\js\localization directory. These dictionaries are also available on npm.

Include the dictionaries using the import or require statement the statement depends on the syntax for working with modules. The following code shows ECMAScript 6 and CommonJS syntaxes:

// ...
// Dictionaries for German language
import deMessages from "devextreme/localization/messages/de.json";
import { locale, loadMessages } from "devextreme/localization";

export default {
    created() {
        loadMessages(deMessages);
        locale(navigator.language);
    }
}

// ...
// Dictionaries for German language
const deMessages = require('devextreme/localization/messages/de.json');
const localization = require('devextreme/localization');

localization.loadMessages(deMessages);
localization.locale(navigator.language);

React

You can find all the dictionaries on your local machine in the DevExtreme installation folder's or ZIP archive's Lib\js\localization directory. These dictionaries are also available on npm.

Include the dictionaries using the import or require statement the statement depends on the syntax for working with modules. The following code shows ECMAScript 6 and CommonJS syntaxes:

// ...
// Dictionaries for German language
import deMessages from "devextreme/localization/messages/de.json";
import { locale, loadMessages } from "devextreme/localization";

class App extends React.Component {
    constructor(props) {
        super(props);
        loadMessages(deMessages);
        locale(navigator.language);
    }
}

// ...
// Dictionaries for German language
const deMessages = require('devextreme/localization/messages/de.json');
const localization = require('devextreme/localization');

localization.loadMessages(deMessages);
localization.locale(navigator.language);

Create a New Dictionary

To make a dictionary for a new locale:

Copy one of the available dictionaries.
Rename it according to the new locale.
Translate the strings in it and change the locale key.

You can submit JSON dictionaries to our repository on GitHub. You should refer to our Contribution Guide before submitting content.

Add Strings to a Dictionary

In the following example, the loadMessages(messages) method adds a string with the greetingMessage key to the English and German dictionaries. The formatMessage(key, value) method then uses this key to retrieve the string from the dictionary that corresponds to the locale set by the locale(locale) method.

jQuery

$(function() {
    var userName = "John";
    DevExpress.localization.loadMessages({
        "en": {
            "greetingMessage": "Good morning, {0}!"
        },
        "de": {
            "greetingMessage": "Guten morgen, {0}!"
        }
    });
    DevExpress.localization.locale(navigator.language);
    $("#greeting").text(
        DevExpress.localization.formatMessage("greetingMessage", userName)
    )
})

<h1 id="greeting"></h1>

Angular

import { Component } from '@angular/core';
import { formatMessage, loadMessages, locale } from 'devextreme/localization';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor() {
        loadMessages({
            'en': {
                'greetingMessage': 'Good morning, {0}!'
            },
            'de': {
                'greetingMessage': 'Guten morgen, {0}!'
            }
        });
        locale(navigator.language);
    }

    userName: string = 'John';
    get greeting() {
        return formatMessage('greetingMessage', this.userName);
    }
}

<h1>{{ greeting }}</h1>

Vue

<template>
    <h1>{{ greeting }}</h1>
</template>

<script>
import { formatMessage, loadMessages, locale } from 'devextreme/localization';

export default {
    created() {
        loadMessages({
            'en': {
                'greetingMessage': 'Good morning, {0}!'
            },
            'de': {
                'greetingMessage': 'Guten morgen, {0}!'
            }
        });
        locale('de');
    },
    data() {
        return {
            userName: 'John'
        }
    },
    computed: {
        greeting() {
            return formatMessage('greetingMessage', this.userName);
        }
    }
}
</script>

React

import React from 'react';

import { formatMessage, loadMessages, locale } from 'devextreme/localization';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.userName = 'John';

        loadMessages({
            'en': {
                'greetingMessage': 'Good morning, {0}!'
            },
            'de': {
                'greetingMessage': 'Guten morgen, {0}!'
            }
        });

        this.greeting = formatMessage('greetingMessage', this.userName);

        locale(navigator.language);
    }

    render() {
        return (
            <h1>{ this.greeting }</h1>
        );
    }
}
export default App;

You can also see this approach in one of our demos:

Using Intl Demo Using Globalize Demo

Override Strings in a Dictionary

To override a string, find its key in any dictionary and use it to specify the new string value.

In the following code, we override two strings from the English dictionary:

jQuery

$(function() {
    DevExpress.localization.loadMessages({
        "en": {
            "dxDataGrid-editingDeleteRow": "Remove",
            "dxDataGrid-editingUndeleteRow": "Recover"
        }
    });
});

Angular

import { Component } from '@angular/core';
import { loadMessages } from 'devextreme/localization';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor() {
        loadMessages({
            "en": {
                "dxDataGrid-editingDeleteRow": "Remove",
                "dxDataGrid-editingUndeleteRow": "Recover"
            }
        });
    }
}

Vue

<template>
    <!-- ... -->
</template>

<script>
import { loadMessages } from 'devextreme/localization';

export default {
    created() {
        loadMessages({
            "en": {
                "dxDataGrid-editingDeleteRow": "Remove",
                "dxDataGrid-editingUndeleteRow": "Recover"
            }
        });
    }
}
</script>

React

import React from 'react';

import { loadMessages } from 'devextreme/localization';

class App extends React.Component {
    constructor(props) {
        super(props);
        loadMessages({
            "en": {
                "dxDataGrid-editingDeleteRow": "Remove",
                "dxDataGrid-editingUndeleteRow": "Recover"
            }
        });
    }

    render() {
        return (
            { /* ... */}
        );
    }
}
export default App;

See Also

List - Localization

Localize Dates, Numbers, and Currencies

DevExtreme enables you to localize date, number and currency values using Intl or Globalize. We recommend using Intl because it is supported out of the box. You can use Globalize instead if the target browser do not support Intl natively or via a polyfill, or if your app is already using Globalize.

Using Intl

Intl is the short name used to refer to a particular ECMAScript Internationalization API object. DevExtreme supports this API out of the box. All you need to do is set the locale:

jQuery

DevExpress.localization.locale(navigator.language);
// ...
// DevExtreme UI components are configured here
// ...

<head>
    <!-- ... -->
    <!-- DevExtreme library -->
    <script src="https://cdn3.devexpress.com/jslib/25.1.4/js/dx.all.js"></script>
    <!-- Dictionary files for German language -->
    <script src="https://cdn3.devexpress.com/jslib/25.1.4/js/localization/dx.messages.de.js"></script>
    <script src="index.js"></script>
</head>

Angular

import { Component } from '@angular/core';
// Dictionaries for German language
import deMessages from "devextreme/localization/messages/de.json";
import { locale, loadMessages } from "devextreme/localization";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor() {
        loadMessages(deMessages);
        locale(navigator.language);
    }
}

Vue

<template>
    <!-- ... -->
</template>

<script>
// Dictionaries for German language
import deMessages from "devextreme/localization/messages/de.json";

import { locale, loadMessages } from "devextreme/localization";

export default {
    created() {
        loadMessages(deMessages);
        locale(navigator.language);
    }
}
</script>

React

// Dictionaries for German language
import deMessages from "devextreme/localization/messages/de.json";

import { locale, loadMessages } from "devextreme/localization";

class App extends React.Component {
    constructor(props) {
        super(props);
        loadMessages(deMessages);
        locale(navigator.language);
    }

    render() {
        return (
            {/* ... */}
        );
    }
}
export default App;

CommonJS syntax

// ...
// Dictionaries for German language
const deMessages = require('devextreme/localization/messages/de.json');
const localization = require('devextreme/localization');

localization.loadMessages(deMessages);
localization.locale(navigator.language);

View Demo

If you want to format and localize strings, numbers, dates, and currencies automatically according to the specified locale, define the format.type property. You can also specify a currency other than USD globally. For this purpose, use the defaultCurrency or currency settings:

jQuery

$(function() {
    // Specifying a currency globally
    DevExpress.config({ defaultCurrency: "EUR" });

    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "Price",
            // Specifying a currency in a format definition
            format: {
                type: "currency",
                currency: "RUB"
            }
        }]
    });
});

Angular

import { Component } from '@angular/core';
import config from 'devextreme/core/config';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor() {
        // Specifying a currency globally
        config({ defaultCurrency: 'EUR' });      
    }
}

<dx-data-grid ... >
    <dxi-column dataField="price">
        <!-- Specifying a currency in a format definition -->
        <dxo-format
            type="currency"
            currency="RUB">
        </dxo-format>
    </dxi-column>
</dx-data-grid>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

<template>
    <DxDataGrid ... >
        <DxColumn data-field="price">
            <!-- Specifying a currency in a format definition -->
            <DxFormat
                type="currency"
                currency="RUB"
            />
        </DxColumn>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import config from 'devextreme/core/config';

import DxDataGrid, {
    DxColumn,
    DxFormat
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxFormat
    },
    created() {
        // Specifying a currency globally
        config({ defaultCurrency: 'EUR' });  
    }
}
</script>

React

import React from 'react';
import config from 'devextreme/core/config';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Column, Format
} from 'devextreme-react/data-grid';

class App extends React.Component {
    constructor(props) {
        super(props);
        // Specifying a currency globally
        config({ defaultCurrency: 'EUR' });
    }

    render() {
        return (
            <DataGrid ... >
                <Column dataField="price">
                    // Specifying a currency in a format definition
                    <Format
                        type="currency"
                        currency="RUB"
                    />
                </Column>
            </DataGrid>
        );
    }
}
export default App;

You can use structures compatible with the Intl API for value formatting. Refer to the Intl Formats section in the Value Formatting article for more information.

Using Globalize

IMPORTANT

The Globalize package is outdated and potentially unsafe.

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

NOTE

If you apply

CSP rules

, we do not recommend that you use the Globalize technique. Use the

Intl

technique instead.

The following files are required to activate Globalize in your project:

Globalize library
CLDR library
CLDR data

To include these components, you can use CDN or npm.

CDN or local files

Specify the Globalize and CLDR libraries using <script> tags as shown below. In this example, the German dictionary is included. Note that the order in which you include libraries is important. Then, set the locale using the Globalize.locale() method:

CDN

<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- ... -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr/event.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr/supplemental.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/message.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/number.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/currency.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.3.0/globalize/date.min.js"></script>
    <!-- DevExtreme library -->
    <script src="https://cdn3.devexpress.com/jslib/25.1.4/js/dx.all.js"></script>
    <!-- Dictionary files for German language -->
    <script src="https://cdn3.devexpress.com/jslib/25.1.4/js/localization/dx.messages.de.js"></script>
    <!-- Common and language-specific CLDR data -->
    <script src="https://unpkg.com/devextreme-cldr-data/supplemental.js"></script>
    <script src="https://unpkg.com/devextreme-cldr-data/de.js"></script>
</head>
<script>
    $(function() {
        Globalize.locale(navigator.language);
    });
</script>

View Demo

npm

Install the devextreme-cldr-data and globalize packages:

npm install --save-dev devextreme-cldr-data globalize

Then, include Globalize, CLDR, and language-specific CLDR data using the import or require statement—the statement depends on the syntax for working with modules. The code below shows ECMAScript 6 and CommonJS syntaxes. These examples include the German dictionary.

npm: ECMAScript 6 syntax

import "devextreme/localization/globalize/number";
import "devextreme/localization/globalize/date";
import "devextreme/localization/globalize/currency";
import "devextreme/localization/globalize/message";

// Dictionaries for the German language
import deMessages from "devextreme/localization/messages/de.json";

// Common and language-specific CLDR JSONs
import supplemental from "devextreme-cldr-data/supplemental.json";
import deCldrData from "devextreme-cldr-data/de.json";

import Globalize from "globalize";

// ===== Angular ======
export class AppComponent {
    constructor() {
        Globalize.load(
            supplemental, deCldrData
        );
        Globalize.loadMessages(deMessages);
        Globalize.locale(navigator.language);
    }
}

// ===== Vue ======
export default {
    created() {
        Globalize.load(
            supplemental, deCldrData
        );
        Globalize.loadMessages(deMessages);
        Globalize.locale(navigator.language);
    }
}

// ===== React ======
class App extends React.Component {
    constructor(props) {
        super(props);
        Globalize.load(
            supplemental, deCldrData
        );
        Globalize.loadMessages(deMessages);
        Globalize.locale(navigator.language);
    }
}

npm: CommonJS syntax

require('devextreme/localization/globalize/message');
require('devextreme/localization/globalize/number');
require('devextreme/localization/globalize/currency');
require('devextreme/localization/globalize/date');

// Dictionaries for the German language
const deMessages = require('devextreme/localization/messages/de.json');

const Globalize = require('globalize');
Globalize.load(
    // Common and language-specific CLDR JSONs
    require('devextreme-cldr-data/supplemental.json'),
    require('devextreme-cldr-data/main/de.json')
);

Globalize.loadMessages(deMessages);

Globalize.locale(navigator.language);

View Demo

You can format and localize strings, numbers, dates, and currencies automatically according to a locale. For this, apply the format.type property. You can also use a currency other than USD (see the last example in the Using Intl topic).

In addition, you can now format values using structures accepted by numberFormatter, currencyFormatter, and dateFormatter, for example:

jQuery

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "OrderDate",
            format: { skeleton: "yMMMd" }
        }, {
            dataField: "SaleAmount",
            format: { currency: "EUR", maximumFractionDigits: 2 }
        }]
    });
});

Angular

<dx-data-grid ... >
    <dxi-column
        dataField="OrderDate"
        [format]="{ skeleton: 'yMMMd' }">
    </dxi-column>
    <dxi-column
        dataField="SaleAmount"
        [format]="{ currency: 'EUR', maximumFractionDigits: 2 }">
    </dxi-column>
</dx-data-grid>

import { Component } from '@angular/core';
// ...
// import dictionaries and localization modules here

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="OrderDate"
            :format="{ skeleton: 'yMMMd' }"
        />
        <DxColumn
            data-field="SaleAmount"
            :format="{ currency: 'EUR', maximumFractionDigits: 2 }"
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
// ...
// import dictionaries and localization modules here

import DxDataGrid, {
    DxColumn
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    // ...
}
</script>

React

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Column
} from 'devextreme-react/data-grid';
// ...
// import dictionaries and localization modules here

class App extends React.Component {
    constructor(props) {
        super(props);
        // ...
    }

    render() {
        return (
            <DataGrid ... >
                <Column
                    dataField="price"
                    format={{ currency: 'EUR', maximumFractionDigits: 2 }}
                />
            </DataGrid>
        );
    }
}
export default App;