Translate datepicker Kendo UI with Angularjs

Asked

Viewed 1,036 times

5

I need to translate the Kendo date Picker for English, I already insert the i18n file into my html but it didn’t work, I did the same at angular and it worked with angular

my html

<head>
<script src="angular-locale_pt-br.js"></script>
<script src="kendo.culture.pt-BR.js"></script>

</head>
<body>
   <input kendo-date-picker>
</body>

Kendo.culture.en-BR.js

(function( window, undefined ) {
kendo.cultures["pt-BR"] = {
    name: "pt-BR",
    numberFormat: {
        pattern: ["-n"],
        decimals: 2,
        ",": ".",
        ".": ",",
        groupSize: [3],
        percent: {
            pattern: ["-n%","n%"],
            decimals: 2,
            ",": ".",
            ".": ",",
            groupSize: [3],
            symbol: "%"
        },
        currency: {
            pattern: ["-$ n","$ n"],
            decimals: 2,
            ",": ".",
            ".": ",",
            groupSize: [3],
            symbol: "R$"
        }
    },
    calendars: {
        standard: {
            days: {
                names: ["domingo","segunda-feira","terça-feira","quarta-feira","quinta-feira","sexta-feira","sábado"],
                namesAbbr: ["dom","seg","ter","qua","qui","sex","sáb"],
                namesShort: ["D","S","T","Q","Q","S","S"]
            },
            months: {
                names: ["janeiro","fevereiro","março","abril","maio","junho","julho","agosto","setembro","outubro","novembro","dezembro",""],
                namesAbbr: ["jan","fev","mar","abr","mai","jun","jul","ago","set","out","nov","dez",""]
            },
            AM: [""],
            PM: [""],
            patterns: {
                d: "dd/MM/yyyy",
                D: "dddd, d' de 'MMMM' de 'yyyy",
                F: "dddd, d' de 'MMMM' de 'yyyy HH:mm:ss",
                g: "dd/MM/yyyy HH:mm",
                G: "dd/MM/yyyy HH:mm:ss",
                m: "d' de 'MMMM",
                M: "d' de 'MMMM",
                s: "yyyy'-'MM'-'dd'T'HH':'mm':'ss",
                t: "HH:mm",
                T: "HH:mm:ss",
                u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'",
                y: "MMMM' de 'yyyy",
                Y: "MMMM' de 'yyyy"
            },
            "/": "/",
            ":": ":",
            firstDay: 0
        }
    }
 }
})(this);

What is missing?

angularjs angular-kendo

1 answer

3


Manage to solve, just set Culture in your scope that the components that will be on the page will be translated

example : 

var app = angular.module('teste', [ 'kendo.directives' ]);

 app.controller('testeController',
     [ '$scope', function ($scope) {

    kendo.culture("pt-BR"); 
   ...

The translation files can be found in the following links

https://github.com/loudenvier/kendo-global translation to the grid

The translation for the Datetimepicker and Datepicker components follows below, just save to a file and import to your page as I did above.

(function( window, undefined ) {
kendo.cultures["pt-BR"] = {
    name: "pt-BR",
    numberFormat: {
        pattern: ["-n"],
        decimals: 2,
        ",": ".",
        ".": ",",
        groupSize: [3],
        percent: {
            pattern: ["-n%","n%"],
            decimals: 2,
            ",": ".",
            ".": ",",
            groupSize: [3],
            symbol: "%"
        },
        currency: {
            pattern: ["-$ n","$ n"],
            decimals: 2,
            ",": ".",
            ".": ",",
            groupSize: [3],
            symbol: "R$"
        }
    },
    calendars: {
        standard: {
            days: {
                names: ["domingo","segunda-feira","terça-feira","quarta-feira","quinta-feira","sexta-feira","sábado"],
                namesAbbr: ["dom","seg","ter","qua","qui","sex","sáb"],
                namesShort: ["D","S","T","Q","Q","S","S"]
            },
            months: {
                names: ["janeiro","fevereiro","março","abril","maio","junho","julho","agosto","setembro","outubro","novembro","dezembro",""],
                namesAbbr: ["jan","fev","mar","abr","mai","jun","jul","ago","set","out","nov","dez",""]
            },
            AM: [""],
            PM: [""],
            patterns: {
                d: "dd/MM/yyyy",
                D: "dddd, d' de 'MMMM' de 'yyyy",
                F: "dddd, d' de 'MMMM' de 'yyyy HH:mm:ss",
                g: "dd/MM/yyyy HH:mm",
                G: "dd/MM/yyyy HH:mm:ss",
                m: "d' de 'MMMM",
                M: "d' de 'MMMM",
                s: "yyyy'-'MM'-'dd'T'HH':'mm':'ss",
                t: "HH:mm",
                T: "HH:mm:ss",
                u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'",
                y: "MMMM' de 'yyyy",
                Y: "MMMM' de 'yyyy"
            },
            "/": "/",
            ":": ":",
            firstDay: 0
        }
    }
}
})(this);

Browser other questions tagged angularjs angular-kendo

You are not signed in. Login or sign up in order to post.