Use Globalize to Format Dates, Numbers, and Currencies

• Apr 27, 2020
• 3 minutes to read

The HTML JavaScript Dashboard control supports both Intl and Globalize to format dates, numbers, and currencies. Starting with v19.2, the control uses Intl as a default library to support culture-specific data. If you want to continue to use Globalize in your existing applications for licensing reasons or to avoid any changes in output, follow the instructions below.

Modular Approach

Globalize should be globally initialized in the application before devexpress-dashboard is used.

1. Install the following packages:

   npm install globalize@^1.0.1 devextreme\-cldr\-data@^1.0.2
   

2. Import the globalize libraries before devexpress-dashboard is used:

   import "devextreme/localization/globalize/message";  
   import "devextreme/localization/globalize/number";  
   import "devextreme/localization/globalize/currency";  
   import "devextreme/localization/globalize/date";
   import * as Globalize from 'globalize';
   
   import { DashboardControl, ResourceManager } from 'devexpress-dashboard';
   

3. Define the initGlobalize method and call it before you embed the resources. Use the Globalize.locale method to apply culture settings. The following code shows how to apply the Spanish locale:

   export class DashboardComponent implements AfterViewInit, OnDestroy {
   private dashboardControl!: DashboardControl;
   constructor(private element: ElementRef) {
       this.initGlobalize();
       ResourceManager.embedBundledResources();
   }
   initGlobalize() {
       Globalize.load([
       require('devextreme-cldr-data/es.json'),
       //require('devextreme-cldr-data/de.json'),
       require('devextreme-cldr-data/supplemental.json')
       ]);
       Globalize.locale('es');
   }
   

You need to patch Angular, React, and Vue applications to use Globalize.

Angular

In the tsconfig.json file, add paths to map the globalize and cldrjs modules.

{ 
  "compilerOptions": { 
    // ...
    "paths": { 
        "jszip": [  
        "node_modules/jszip/dist/jszip.min.js"  
      ],  
      "globalize": [  
        "node_modules/globalize/dist/globalize"  
      ],  
      "globalize/*": [  
        "node_modules/globalize/dist/globalize/*"    
      ], 
      "cldr": [  
        "node_modules/cldrjs/dist/cldr"     
      ], 
      "cldr/*": [  
        "node_modules/cldrjs/dist/cldr/*"  
      ]
    }
  }
}

React

1. Install the react-app-rewired library to customize CRA and its Webpack config without ejecting.

   npm install react-app-rewired
   

2. Create a config-overrides.js file at the root of your application and add the following content:

   var path = require('path');
   
   module.exports = function override(config, env) {
       config.resolve.alias = {
       globalize$: path.resolve(__dirname, 'node_modules/globalize/dist/globalize.js'),
       globalize: path.resolve(__dirname, 'node_modules/globalize/dist/globalize'),
       cldr$: path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr.js'),
       cldr: path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr')
       };
       return config;
   }
   

3. Open package.json and modify the scripts section as shown below:

   "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test",
       "eject": "react-app-rewired eject"
   },
   

Vue

Create a vue.config.js file at the root of your application and add the following content to customize Webpack:

var path = require('path');

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
        .set('globalize$', path.resolve(__dirname, 'node_modules/globalize/dist/globalize.js'))
        .set('globalize', path.resolve(__dirname, 'node_modules/globalize/dist/globalize'))
        .set('cldr$', path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr.js'))
        .set('cldr', path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr'))
    }
}

Global Namespaces

1. Install the following packages:

   npm install globalize@^1.0.1 devextreme-cldr-data@^1.0.2
   

2. Add the scripts used to format culture settings:

   <head>
   <link href="node_modules/devextreme/dist/css/dx.common.css" rel="stylesheet" />
   <link href="node_modules/devextreme/dist/css/dx.light.css" rel="stylesheet" />
   <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css" rel="stylesheet" />
   <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css" rel="stylesheet" />
   <link href="node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css" rel="stylesheet" />
   <link href="node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css" rel="stylesheet" />
   
   <script src="node_modules/jquery/dist/jquery.js"></script>
   <script src="node_modules/jquery-ui-dist/jquery-ui.js"></script>
   <script src="node_modules/knockout/build/output/knockout-latest.js"></script>
   <script src="node_modules/ace-builds/src-min-noconflict/ace.js"></script>
   <script src="node_modules/ace-builds/src-min-noconflict/ext-language_tools.js"></script>
   <script src="node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js"></script>
   <script src="node_modules/ace-builds/src-min-noconflict/theme-ambiance.js"></script>
   
   <!-- Globalize and Cldr scripts -->
   <script src="node_modules/cldrjs/dist/cldr.js"></script>
   <script src="node_modules/cldrjs/dist/cldr/event.js"></script>
   <script src="node_modules/cldrjs/dist/cldr/supplemental.js"></script>
   <script src="node_modules/globalize/dist/globalize.js"></script>
   <script src="node_modules/globalize/dist/globalize/message.js"></script>
   <script src="node_modules/globalize/dist/globalize/number.js"></script>
   <script src="node_modules/globalize/dist/globalize/date.js"></script>
   <script src="node_modules/globalize/dist/globalize/currency.js"></script>
   <script src="node_modules/devextreme-cldr-data/supplemental.js" charset="UTF-8"></script>
   <script src="node_modules/devextreme-cldr-data/es.js" charset="UTF-8"></script>
   <!--<script src="node_modules/devextreme-cldr-data/de.js" charset="UTF-8"></script>-->
   <!-- End of scripts -->
   
   <script src="node_modules/devextreme/dist/js/dx.all.js"></script>
   <script src="node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js"></script>
   <script src="node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js"></script>
   <script src="node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js"></script>
   </head>
   

3. Use the Globalize.locale method to apply culture settings. The following code shows how to apply the Spanish locale:

   window.onload = function () {
       Globalize.locale('es');        
       DevExpress.Dashboard.ResourceManager.embedBundledResources();
       var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
           // ...
       });
       dashboardControl.render();
   };