Formatting Dates and Numbers (Vue)

To globalize your Wijmo application, include a reference to the appropriate culture file after loading Wijmo. Dates are formatted using the Globalize.formatDate function, and numbers are formatted using the Globalize.formatNumber function. This sample uses these methods to shows the formats for some of the supported cultures.

Learn about FlexGrid | Globalization Documentation | Globalize API Reference

This example uses Vue.

app.vue
index.html
Copy to CodeMine
<template> <div class="container-fluid"> <p> <wj-menu :value="selectedValue" :header="'Culture'" :itemClicked="cultureChanged"> <wj-menu-item :value="'en'">English (US)</wj-menu-item> <wj-menu-item :value="'en-GB'">English (UK)</wj-menu-item> <wj-menu-item :value="'es'">Spanish</wj-menu-item> <wj-menu-item :value="'de'">German</wj-menu-item> <wj-menu-item :value="'it'">Italian</wj-menu-item> <wj-menu-item :value="'fr'">French</wj-menu-item> <wj-menu-item :value="'pt'">Portuguese</wj-menu-item> <wj-menu-item :value="'ru'">Russian</wj-menu-item> <wj-menu-item :value="'ja'">Japanese</wj-menu-item> <wj-menu-item :value="'ko'">Korean</wj-menu-item> <wj-menu-item :value="'zh-CN'">Chinese</wj-menu-item> </wj-menu> </p> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">Dates</h4> </div> <div class="panel-body"> <table class="table table-condensed"> <thead> <tr> <th>format</th> <th>description</th> <th>result</th> </tr> </thead> <tbody> <tr v-for="item of dateSamples" :key="item.id"> <td> <b>{{ item.format }}</b> </td> <td>{{ item.description }}</td> <td>{{ formatDate(item.format) }}</td> </tr> </tbody> </table> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">Numbers</h4> </div> <div class="panel-body"> <div class="form-group"> <label for="theValue">Value</label> <wj-input-number id="theValue" :value="numValue" :valueChanged="numberValueChanged" :step="1"> </wj-input-number> </div> <div class="form-group"> <label for="thePrecision">Precision</label> <wj-input-number id="thePrecision" :value="precision" :valueChanged="precisionValueChanged" :step="1" :min="0" :max="10"> </wj-input-number> </div> </div> <div class="panel-body"> <table class="table table-condensed"> <thead> <tr> <th>specifier</th> <th>description</th> <th class="text-right">result</th> </tr> </thead> <tbody> <tr v-for="item of numberSamples" :key="item.id"> <td> <b>{{ item.specifier }}</b> </td> <td>{{ item.description }}</td> <td class="text-right">{{ formatNumber(item.specifier) }}</td> </tr> </tbody> </table> </div> </div> </div> </template> <script setup> import * as wijmo from "@mescius/wijmo"; //cultures import "@mescius/wijmo.cultures/wijmo.culture.en-GB"; import "@mescius/wijmo.cultures/wijmo.culture.es"; import "@mescius/wijmo.cultures/wijmo.culture.de"; import "@mescius/wijmo.cultures/wijmo.culture.it"; import "@mescius/wijmo.cultures/wijmo.culture.fr"; import "@mescius/wijmo.cultures/wijmo.culture.pt"; import "@mescius/wijmo.cultures/wijmo.culture.ru"; import "@mescius/wijmo.cultures/wijmo.culture.ja"; import "@mescius/wijmo.cultures/wijmo.culture.ko"; import "@mescius/wijmo.cultures/wijmo.culture.zh"; import "@mescius/wijmo.cultures/wijmo.culture.en"; import { ref } from "vue"; const dateSamples = ref([ { format: "d", description: "Short Date Pattern" }, { format: "D", description: "Long Date Pattern" }, { format: "f", description: "Full Date/Time Pattern (short time)" }, { format: "F", description: "Full Date/Time Pattern (long time)" }, { format: "t", description: "Short Time Pattern" }, { format: "T", description: "Long Time Pattern" }, { format: "'Q'Q yyyy", description: "Quarter/Year" }, { format: "MMMM dd, yyyy", description: "Custom format" }, ]); const numberSamples = ref([ { specifier: "n*", description: "Number" }, { specifier: "n*,", description: "Number (thousands)" }, { specifier: "n*,,", description: "Number (millions)" }, { specifier: "f*", description: "Fixed-point" }, { specifier: "g*", description: "General (no trailing zeros)" }, { specifier: "d*", description: "Decimal (integers)" }, { specifier: "x*", description: "Hexadecimal (integers)" }, { specifier: "c*", description: "Currency" }, { specifier: "c*€", description: "Currency (explicit currency symbol)", }, { specifier: "c* ", description: "Currency (no currency symbol)" }, { specifier: "p*", description: "Percent" }, ]); const numValue = ref(1234.5678); const precision = ref(2); const selectedValue = ref("en"); function formatDate(format) { return wijmo.Globalize.format(new Date(), format); } function formatNumber(specifier) { let format = specifier.replace("*", precision.value.toString()); return wijmo.Globalize.format(numValue.value, format); } function cultureChanged(sender) { if (sender.selectedValue) { selectedValue.value = sender.selectedValue; wijmo.changeCulture(sender.selectedValue); } } function numberValueChanged(sender) { numValue.value = sender.value; } function precisionValueChanged(sender) { precision.value = sender.value; } </script> <style> body { margin-bottom: 24px; } </style>
<template> <div class="container-fluid"> <p> <wj-menu :value="selectedValue" :header="'Culture'" :itemClicked="cultureChanged"> <wj-menu-item :value="'en'">English (US)</wj-menu-item> <wj-menu-item :value="'en-GB'">English (UK)</wj-menu-item> <wj-menu-item :value="'es'">Spanish</wj-menu-item> <wj-menu-item :value="'de'">German</wj-menu-item> <wj-menu-item :value="'it'">Italian</wj-menu-item> <wj-menu-item :value="'fr'">French</wj-menu-item> <wj-menu-item :value="'pt'">Portuguese</wj-menu-item> <wj-menu-item :value="'ru'">Russian</wj-menu-item> <wj-menu-item :value="'ja'">Japanese</wj-menu-item> <wj-menu-item :value="'ko'">Korean</wj-menu-item> <wj-menu-item :value="'zh-CN'">Chinese</wj-menu-item> </wj-menu> </p> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">Dates</h4> </div> <div class="panel-body"> <table class="table table-condensed"> <thead> <tr> <th>format</th> <th>description</th> <th>result</th> </tr> </thead> <tbody> <tr v-for="item of dateSamples" :key="item.id"> <td> <b>{{ item.format }}</b> </td> <td>{{ item.description }}</td> <td>{{ formatDate(item.format) }}</td> </tr> </tbody> </table> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">Numbers</h4> </div> <div class="panel-body"> <div class="form-group"> <label for="theValue">Value</label> <wj-input-number id="theValue" :value="numValue" :valueChanged="numberValueChanged" :step="1"> </wj-input-number> </div> <div class="form-group"> <label for="thePrecision">Precision</label> <wj-input-number id="thePrecision" :value="precision" :valueChanged="precisionValueChanged" :step="1" :min="0" :max="10"> </wj-input-number> </div> </div> <div class="panel-body"> <table class="table table-condensed"> <thead> <tr> <th>specifier</th> <th>description</th> <th class="text-right">result</th> </tr> </thead> <tbody> <tr v-for="item of numberSamples" :key="item.id"> <td> <b>{{ item.specifier }}</b> </td> <td>{{ item.description }}</td> <td class="text-right">{{ formatNumber(item.specifier) }}</td> </tr> </tbody> </table> </div> </div> </div> </template> <script setup> import * as wijmo from "@mescius/wijmo"; //cultures import "@mescius/wijmo.cultures/wijmo.culture.en-GB"; import "@mescius/wijmo.cultures/wijmo.culture.es"; import "@mescius/wijmo.cultures/wijmo.culture.de"; import "@mescius/wijmo.cultures/wijmo.culture.it"; import "@mescius/wijmo.cultures/wijmo.culture.fr"; import "@mescius/wijmo.cultures/wijmo.culture.pt"; import "@mescius/wijmo.cultures/wijmo.culture.ru"; import "@mescius/wijmo.cultures/wijmo.culture.ja"; import "@mescius/wijmo.cultures/wijmo.culture.ko"; import "@mescius/wijmo.cultures/wijmo.culture.zh"; import "@mescius/wijmo.cultures/wijmo.culture.en"; import { ref } from "vue"; const dateSamples = ref([ { format: "d", description: "Short Date Pattern" }, { format: "D", description: "Long Date Pattern" }, { format: "f", description: "Full Date/Time Pattern (short time)" }, { format: "F", description: "Full Date/Time Pattern (long time)" }, { format: "t", description: "Short Time Pattern" }, { format: "T", description: "Long Time Pattern" }, { format: "'Q'Q yyyy", description: "Quarter/Year" }, { format: "MMMM dd, yyyy", description: "Custom format" }, ]); const numberSamples = ref([ { specifier: "n*", description: "Number" }, { specifier: "n*,", description: "Number (thousands)" }, { specifier: "n*,,", description: "Number (millions)" }, { specifier: "f*", description: "Fixed-point" }, { specifier: "g*", description: "General (no trailing zeros)" }, { specifier: "d*", description: "Decimal (integers)" }, { specifier: "x*", description: "Hexadecimal (integers)" }, { specifier: "c*", description: "Currency" }, { specifier: "c*€", description: "Currency (explicit currency symbol)", }, { specifier: "c* ", description: "Currency (no currency symbol)" }, { specifier: "p*", description: "Percent" }, ]); const numValue = ref(1234.5678); const precision = ref(2); const selectedValue = ref("en"); function formatDate(format) { return wijmo.Globalize.format(new Date(), format); } function formatNumber(specifier) { let format = specifier.replace("*", precision.value.toString()); return wijmo.Globalize.format(numValue.value, format); } function cultureChanged(sender) { if (sender.selectedValue) { selectedValue.value = sender.selectedValue; wijmo.changeCulture(sender.selectedValue); } } function numberValueChanged(sender) { numValue.value = sender.value; } function precisionValueChanged(sender) { precision.value = sender.value; } </script> <style> body { margin-bottom: 24px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo Globalization/Formatting</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="compiler.js" type="module"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.js'); </script> </head> <body> <div id="app"> </div> </body> </html>
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: '../plugin-vue/index.js' } //'*.vue': { loader: 'systemjs-plugin-vue' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.vue2.chart.analytics": "npm:@mescius/wijmo.vue2.chart.analytics/index.js", "@mescius/wijmo.vue2.chart.animation": "npm:@mescius/wijmo.vue2.chart.animation/index.js", "@mescius/wijmo.vue2.chart.annotation": "npm:@mescius/wijmo.vue2.chart.annotation/index.js", "@mescius/wijmo.vue2.chart.finance.analytics": "npm:@mescius/wijmo.vue2.chart.finance.analytics/index.js", "@mescius/wijmo.vue2.chart.finance": "npm:@mescius/wijmo.vue2.chart.finance/index.js", "@mescius/wijmo.vue2.chart.hierarchical": "npm:@mescius/wijmo.vue2.chart.hierarchical/index.js", "@mescius/wijmo.vue2.chart.interaction": "npm:@mescius/wijmo.vue2.chart.interaction/index.js", "@mescius/wijmo.vue2.chart.radar": "npm:@mescius/wijmo.vue2.chart.radar/index.js", '@mescius/wijmo.vue2.chart.map': 'npm:@mescius/wijmo.vue2.chart.map/index.js', "@mescius/wijmo.vue2.chart": "npm:@mescius/wijmo.vue2.chart/index.js", "@mescius/wijmo.vue2.core": "npm:@mescius/wijmo.vue2.core/index.js", "@mescius/wijmo.vue2.gauge": "npm:@mescius/wijmo.vue2.gauge/index.js", "@mescius/wijmo.vue2.grid.detail": "npm:@mescius/wijmo.vue2.grid.detail/index.js", "@mescius/wijmo.vue2.grid.filter": "npm:@mescius/wijmo.vue2.grid.filter/index.js", "@mescius/wijmo.vue2.grid.grouppanel": "npm:@mescius/wijmo.vue2.grid.grouppanel/index.js", '@mescius/wijmo.vue2.grid.search': 'npm:@mescius/wijmo.vue2.grid.search/index.js', "@mescius/wijmo.vue2.grid.multirow": "npm:@mescius/wijmo.vue2.grid.multirow/index.js", "@mescius/wijmo.vue2.grid.sheet": "npm:@mescius/wijmo.vue2.grid.sheet/index.js", '@mescius/wijmo.vue2.grid.transposed': 'npm:@mescius/wijmo.vue2.grid.transposed/index.js', '@mescius/wijmo.vue2.grid.transposedmultirow': 'npm:@mescius/wijmo.vue2.grid.transposedmultirow/index.js', "@mescius/wijmo.vue2.grid": "npm:@mescius/wijmo.vue2.grid/index.js", "@mescius/wijmo.vue2.input": "npm:@mescius/wijmo.vue2.input/index.js", "@mescius/wijmo.vue2.olap": "npm:@mescius/wijmo.vue2.olap/index.js", "@mescius/wijmo.vue2.viewer": "npm:@mescius/wijmo.vue2.viewer/index.js", "@mescius/wijmo.vue2.nav": "npm:@mescius/wijmo.vue2.nav/index.js", "@mescius/wijmo.vue2.base": "npm:@mescius/wijmo.vue2.base/index.js", '@mescius/wijmo.vue2.barcode.common': 'npm:@mescius/wijmo.vue2.barcode.common/index.js', '@mescius/wijmo.vue2.barcode.composite': 'npm:@mescius/wijmo.vue2.barcode.composite/index.js', '@mescius/wijmo.vue2.barcode.specialized': 'npm:@mescius/wijmo.vue2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', //'systemjs-plugin-vue': 'npm:systemjs-plugin-vue/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);