Globalization

The globalization process combines the translation of component messages with adapting them to specific locales.

The following example demonstrates how to use the Spanish date format and month names in the available Date Inputs and how to localize their built-in messages.

<div id="vueapp" class="vue-app">
    <localization :language="selectedLocale.language">
        <intl :locale="selectedLocale.locale">
            <div class="example-wrapper row">
                <div class="col-xs-12 col-md-12 example-config">
                    <h6>Locale: <dropdownlist
                        :value="selectedLocale"
                        :data-items="locales"
                        :text-field="'locale'"
                        @change="(e) => {
                            this.selectedLocale= e.target.value;
                        }" />
                    </h6>
                </div>
                <div class="col-xs-12 col-md-6 example-col">
                    <p>Calendar</p>
                    <calendar :default-value="new Date()"  >
                    </calendar>
                    <p>DateInput</p>
                    <dateinput
                        :default-value="new Date()" :format="'dd/MMM/yyyy'" >
                    </dateinput>
                    <p>DatePicker</p>
                    <datepicker :default-value="new Date()"
                    :format="'dd/MMM/yyyy'">
                    </datepicker>
                </div>
            </div>
        </intl>
    </localization>
</div>
import Vue from 'vue';
import { DropDownList } from '@progress/kendo-vue-dropdowns';
import { Calendar, DatePicker, DateInput } from '@progress/kendo-vue-dateinputs';
import { IntlProvider, load, loadMessages, LocalizationProvider } 
from '@progress/kendo-vue-intl';

Vue.component('datepicker', DatePicker);
Vue.component('dateinput', DateInput);
Vue.component('calendar', Calendar);
Vue.component('dropdownlist', DropDownList);
Vue.component('intl', IntlProvider);
Vue.component('localization', LocalizationProvider);
import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';

import numbers from 'cldr-numbers-full/main/es/numbers.json';
import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
import dateFields from 'cldr-dates-full/main/es/dateFields.json';
import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';

load(
    likelySubtags,
    currencyData,
    weekData, numbers,
    caGregorian,
    dateFields,
    timeZoneNames
);

import esMessages from './app/es.json';
loadMessages(esMessages, 'es-ES');
const locales = [
    {
        language: 'en-US',
        locale: 'en'
    },
    {
        language: 'es-ES',
        locale: 'es'
    }
];
new Vue({
    el: '#vueapp',
    data: function() {
        return {
            locales: locales,
            selectedLocale: locales[0], 
            value: new Date()
        };
    }
});
{
    "datepicker": {
        "toggleCalendar": "Alternar calendario"
    },
    "calendar": {
        "today": "Hoy"
    },
    "dateinput": {
        "increment": "Incrementar valor",
        "decrement": "Disminuir valor"
    },
    "datetimepicker": {
        "date": "Fecha",
        "time": "Hora",
        "cancel": "Cancelar",
        "set": "Conjunto"
    },
    "timepicker": {
        "set": "Conjunto",
        "cancel": "Cancelar",
        "now": "Ahora",
        "selectNow": "Seleccionar ahora",
        "toggleTimeSelector": "Selector de tiempo de alternancia",
        "toggleClock": "Reloj de palanca"
    },
    "daterangepicker": {
        "swapStartEnd": "Swap start and end values",
        "start": "Comienzo",
        "end": "Fin"
    }
}

Internationalization

The internationalization process applies specific culture formats to a web application.

For more information, refer to:

Messages

The Date Inputs support the localization of their messages by utilizing the Kendo UI for Vue Internationalization package.

The following table lists the built-in message keys and their default values.

Message Key Default Value
dateinput.increment Increase value
dateinput.decrement Decrease value
datepicker.toggleCalendar Toggle calendar
calendar.today Today
calendar.prevView Navigate to previous view
calendar.nextView Navigate to next view

Right-to-Left Support

The Date Inputs do not provide RTL support.

In this article