You’re currently viewing documentation for our jQuery wrappers.We highly recommend that you migrate to the equivalent Native Vue component as that is what will receive updates in the future.

Globalization Overview

Globalization is the process of designing and developing an application that works in multiple cultures.

The culture defines specific information for the number formats, week and month names, date and time formats.

The Kendo UI culture scripts are generated from the Windows 10 and .NET 4.7 server-side culture definitions and match them by design. To customize the culture in your application, refer to the article on culture definition.

Globalization in Kendo UI

Kendo UI for Vue enables you to internationalize the current page by using Kendo UI culture scripts. Kendo UI exposes the kendo.culture("cultureName") method that provides options for selecting the culture script which corresponds to <language code>-<country/region code>. For more information, refer to the API reference of the culture method.

The default culture of Kendo UI widgets is "en-US".

Defining the Current Culture

1. Install Kendo UI and add a theme.

   Copy Codenpm install --save @progress/kendo-ui
   npm install --save @progress/kendo-theme-default

2. Install the Kendo UI Date Inputs package for Vue.

   Copy Codenpm install --save @progress/kendo-dateinputs-vue-wrapper

3. Import the Kendo UI packages and the required culture script to the Vue application.

   Copy Codeimport $ from 'jquery';
   
   import '@progress/kendo-ui'
   import '@progress/kendo-theme-default/dist/all.css'
   
   import '@progress/kendo-ui/js/cultures/kendo.culture.de-DE.js'
   
   import { Calendar, DateinputsInstaller } from '@progress/kendo-dateinputs-vue-wrapper'

4. Before you initialize the Vue application, set the culture script which the Kendo UI components for Vue will use.

   Copy Code<div id="vueapp" class="vue-app row example-wrapper">
       <kendo-calendar :value="new Date()"></kendo-calendar>
   </div>

   Copy Codeimport '@progress/kendo-ui/js/cultures/kendo.culture.de-DE.js';
   
   kendo.culture("de-DE");
   
   Vue.use(DateinputsInstaller);
   
   new Vue({
       el: '#vueapp'
   })

Configuration

Apart from the available global culture definition, the Kendo UI exposes methods which enable you to format and parse number and date objects.

Formatting Number or Date Objects

Kendo UI exposes methods which format the number or date objects by using a specific format string and the current specified culture. For more information, refer to the article on date formatting in Kendo UI.

Kendo UI for Vue supports the following methods for date and number formatting:

• kendo.toString(object, format, [culture])—Returns a string representation of the current object while taking into account the specified format and culture.
• kendo.format(format, arguments)—Replaces each format item in a specified string with the text equivalent of a corresponding object value.

Parsing Strings

Kendo UI exposes methods which convert the specified string to a date or number object. For more information, refer to the article on date parsing in Kendo UI.

Kendo UI for Vue supports the following methods for parsing strings:

• kendo.parseInt(string, [culture])—This method converts a string to a whole number using the specified culture (current culture by default).
• kendo.parseFloat(string, [culture])—Converts a string to a number with floating point using the specified culture (current culture by default).
• kendo.parseDate(string, [formats], [culture])—Converts a string to a JavaScript Date object, taking into account the given format/formats (or the given culture's set of default formats).

Components Depending on Culture Information

All Kendo UI widgets which support number or date formatting also depend on the current culture. These components are the more complex ones such as the Grid, ListView, and Charts among others.

The following Kendo UI components for Vue depend on the current culture:

• Calendar
• DateInput
• DatePicker
• TimePicker
• DateTimePicker
• NumericTextBox
• MaskedTextBox (globalized mask literals)
• Scheduler
• Gantt

Suggested Links

• Configuring Kendo UI for Vue
• Localization of Kendo UI Components for Vue
• Culture Definition in Kendo UI
• Date Formatting in Kendo UI
• Number Formatting in Kendo UI
• Date Parsing in Kendo UI
• Number Parsing in Kendo UI