Adding custom locale language for javascript controls
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:
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
