)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

Adding custom locale language for javascript controls

Platform: jQuery |
Control: General |
Published Date: February 5, 2016 |
Last Revised Date: May 8, 2019

HOW TO ADD CUSTOM LANGUAGE TO JAVASCRIPT CONTROLS

We can add our custom language to JavaScript controls by following some simple steps mentioned below,

We already have localization file for en-US (English). Hence, ‘en-US’ locale is currently being used as default culture or you can also make the following change in it to convert it to your desired language file.

locale text file of en-US is in the following location :”{ installed location}\assets\scripts\ localetexts\ej.localetexts.en-US.js”.

Steps to be followed to your language to JavaScript Controls.

1)Choose any language, find the globalize name (locale object) for the desired culture and say, for example, French. The locale object for French is [fr-FR].

 

2)Change the locale object name and the key values for required control class. Consider the ejDatePicker for example, change the locale object value for ejDatePicker (from ['en-US'] to ['fr-FR']) and key values (e.g., from "Select date" to "Sélectionner une date") as follows.

ej.DatePicker.Locale['en-US'] = {
    watermarkText: "Select date",
    buttonText: 'Today'
};;

 

            The above ej.Datepicker object has been changed to,

ej.DatePicker.Locale['fr-FR'] = {                     //French locale object
    watermarkText: "Sélectionner une date",           //key values in French 
    buttonText: "Aujourd'hui"
 
};;

 

3)Refer culture script of this “fr-FR” in your application after the reference of ej.web.all.min.js file.

<script src="http://cdn.syncfusion.com/13.4.0.53/js/cultures/ej.culture.fr-FR.min.js"> </script>

 

4)Set your preferred culture by assigning corresponding culture object to locale property of ejDatePicker as shown below:

<script type="text/javascript">
        $(function () {            
            
            $("#datepicker").ejDatePicker({
                value: new Date(),
                locale: "fr-FR",            //sets custom “fr-FR” locale 
                headerFormat: 'MMMM yyyy',
    width:"20%"
            });
})
</script>

 

5)Copy the ej.Datepicker object formed in step 2, directly in the html within script tag or create a JavaScript file and then refer the file in the sample.

 

6)The final html of your application for adding custom Locale will be like below given content

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Essential Studio for JavaScript : DatePicker - localization</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
    <!-- style sheet for default theme(flat azure) -->
    <link href="http://cdn.syncfusion.com/13.4.0.53/js/web/flat-azure/ej.web.all.min.css"
          rel="stylesheet" />
    <!--scripts-->
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js"> </script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>
    <script src="http://cdn.syncfusion.com/13.4.0.53/js/web/ej.web.all.min.js"></script>
    <script src="http://cdn.syncfusion.com/13.4.0.53/js/cultures/ej.culture.fr-FR.min.js"> </script>
</head>
<body>
    <div style="padding:10%">    
            <input id="datepicker" type="text" />      
    </div>
    <script type="text/javascript">
        $(function () {
 
            $("#datepicker").ejDatePicker({
                value: new Date(),
                locale: "fr-FR",
                headerFormat: 'MMMM yyyy',
                width: "20%"
            });
        });
        ej.DatePicker.Locale['fr-FR'] = {
            watermarkText: "Sélectionner une date",
            buttonText: "Aujourd'hui"
        };
 
    </script>
</body>
</html>
 

 

The output of the sample html code in previous step is given below:

datepicker

ejDatePicker in French

 

You can also refer the below link to know about localization of ejDatePicker.

Link: http://js.syncfusion.com/demos/web/#!/azure/datepicker/localization

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon