Integration of jQuery DatePicker in ASP.NET Website – Localization (part 3)
About two months ago, I’ve written two blog posts concerning the KeithWood’s jQuery DatePicker and its implementation in ASP.NET Website.
In part 1 I’ve shown the way to integrate the KeithWood’s jQuery DatePicker on an ASP.NET website in just few simple steps.
On the other hand, in part 2, I’ve shown something more advanced (but still easy to implement, especially for those who have experience in working with jQuery) where I’ve added some validation scripts to the jQuery datepickers accompanied with some nice jQuery error notification messages.
Now, in this, part 3 (part 3 will have hyperlink in part 4 ;) ), I will show how to localize your jQuery DatePicker.
Before going forward, I want to note that there are more than 50 translations for this plug-in on its official website – here, scroll down and find the Localization part.
#1 You need to have the JavaScript file for your language.
First of all, you need to get the JavaScript file for your language. You can download all the translations from here (I’ve packed all of them for you).
Once you find it, open the file.
You will see the following code (this is in UK English language)
English UK localisation for jQuery Datepicker.
Written by Stuart. */
(function($) {
$.datepick.regional['en-GB'] = {
monthNames: ['January','February','March','April','May','June',
'July','August','September','October','November','December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'],
dateFormat: 'dd/mm/yyyy', firstDay: 1,
renderer: $.datepick.defaultRenderer,
prevText: 'Prev', prevStatus: 'Show the previous month',
prevJumpText: '<<', prevJumpStatus: 'Show the previous year',
nextText: 'Next', nextStatus: 'Show the next month',
nextJumpText: '>>', nextJumpStatus: 'Show the next year',
currentText: 'Current', currentStatus: 'Show the current month',
todayText: 'Today', todayStatus: 'Show today\'s month',
clearText: 'Clear', clearStatus: 'Erase the current date',
closeText: 'Done', closeStatus: 'Close without change',
yearStatus: 'Show a different year', monthStatus: 'Show a different month',
weekText: 'Wk', weekStatus: 'Week of the year',
dayStatus: 'Select DD, M d', defaultStatus: 'Select a date',
isRTL: false
};
$.datepick.setDefaults($.datepick.regional['en-GB']);
})(jQuery);
So, I have one good and one bad news for you.
The bad one – if you don’t find your language in the list, you will need to make translation yourself. You can use the sample code above, just translate the words inside ‘’ in your language. I haven’t found my language too (Macedonian / Македонски), so I have written my own translation, which is also added in the languages pack. Once you are finished, don’t forget to put your country-code by replacing the en-GB with your own, in my case it is mk.
The good one – once you have the translation, the implementation is very easy.
So, if you make your own translation, don’t forget to add your language code in $datepick.gerional[‘mk’] – at the beginning of the JS language file and at the end where it sets it as default option.
#2 Implementation
Once you have your JS language file, lets implement it on the ASP.NET Website.
I’m working on the same source code from the part 1 and part 2 of this blog post series. So, if you don’t have it, you can download the complete source here.
Here are the files I have in my Solution Explorer in Visual Web Developer.NET 2010
First of all, we need to reference the scripts:
<script type="text/javascript" src="scripts/jquery.datepick.js"></script>
<script type="text/javascript" src="scripts/hajan.datevalidator.js"></script>
<!-- DatePicker Localization Scripts -->
<script type="text/javascript" src="scripts/langs/jquery.datepick-mk.js"></script>
<!-- End DatePicker Localization Scripts -->
and in order to set the default language to be Macedonian, we set it like using $.datepick.regional[‘Language-code’], example:
$(function() {
$('#startdate').datepick({dateFormat: 'mm/dd/yyyy'}, $.datepick.regional['mk']);
$('#enddate').datepick({ dateFormat: 'mm/dd/yyyy' });
});
</script>
And here is the result:
It’s interesting here that I’ve added $.datepick.regional[‘mk’] option to the #startdate text box, but it also applies for the second #enddate text box
This is normal since you probably won’t use mixed languages in one website – it’s not logical (correct me if I’m wrong), but if you are curious to try it, see the following code
<script type="text/javascript" src="scripts/langs/jquery.datepick-mk.js"></script>
<script type="text/javascript" src="scripts/langs/jquery.datepick-en-GB.js"></script>
<!-- End DatePicker Localization Scripts -->
<script type="text/javascript">
$(function () {
$('#startdate').datepick($.extend({dateFormat: 'mm/dd/yyyy'}, $.datepick.regional['mk']));
$('#enddate').datepick($.extend({dateFormat: 'mm/dd/yyyy'}, $.datepick.regional['en-GB']));
});
</script>
Moreover, you can also use
to set the default language for all text box fields that use the DatePicker
$(function () {
$.datepick.setDefaults($.datepick.regional['mk']);
$('#startdate').datepick({dateFormat: 'mm/dd/yyyy'});
$('#enddate').datepick({dateFormat: 'mm/dd/yyyy'});
});
</script>
or if you set it with empty string for the country-code
it will apply the default language settings.
You can also use jquery.datepick.lang.js file where you have all the languages merged into one file. However, I don’t recommended that if you have only two or three languages in your website because its about 90kb. On the other hand, if you load only the languages you want, you will have about 3kb to 20kb, depending of the number of languages you have.
So, we have seen that you can play with these features and customize your Keith Wood’s DatePicker localized on your language on the way you like the most.
The complete source code of the project including all available language files can be downloaded from here.
I hope you like this article.
Please, don’t forget to write your comments.
Thank You,
Hajan