Reputation: 356
I am trying to combine the different jquery-ui datepicker options into one function. I can get most of the script working apart from the language. I have all the i18n files, and I am using a select element to change the value. But nothing seems to be working. What I am doing wrong?
<script>
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
$( "#from" ).datepicker({
defaultDate: "+4w",
changeMonth: true,
numberOfMonths: 3,
showButtonPanel: true,
showOn: "button",
buttonImage: "../images/calendar.gif",
buttonImageOnly: true,
minDate:"+1d",
dateFormat:"yy/mm/dd",
showAnim:"bounce",
onSelect: function( selectedDate ) {
$( "#from" ).datepicker( $.datepicker.regional[ "en-GB" ] );
$( "#locale" ).change(function() {
$( "#from" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
}
});
$( "#to" ).datepicker({
defaultDate: "+2w",
changeMonth: true,
numberOfMonths: 3,
showButtonPanel: true,
showOn: "button",
buttonImage: "../images/calendar.gif",
buttonImageOnly: true,
minDate:"+1d",
dateFormat:"yy/mm/dd",
showAnim:"bounce",
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( $.datepicker.regional[ "en-GB" ] );
$( "#locale" ).change(function() {
$( "#to" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
}
});
});
</script>
Upvotes: 5
Views: 27457
Reputation: 31
Well, it took me almost one full day to get the Localisation working on my jQuery DatePicker:
Step 1: Create a JS File with all the Translations for Month Names etc for all languages (for which you want the translations to appear) in one common file and name it as jquery.ui.datepicker-common.js (or what ever you like) (you can create separate JS files for all required languages as well and name as --jquery.ui.datepicker-fr.js for French File )
Step 2: Include this JS file in the webpage, where you want the translated values to appear.
<script src="Assets/JS/JQuery/jquery.ui.datepicker-fr.js" type="text/javascript"></script>
Step 3: Follow this example to make DatePicker use the translated language.
Paste your datepicker name on DatePickerName
.
Paste your control name that hold the Current Language in hdn_Locale
(as used in example).
$("#DatePickerName").datepicker({
changeMonth: true,
changeYear: true,
defaultDate: "+4w",
minDate: "+1d",
dateFormat: "yy/mm/dd",
onSelect: function (selectedDate) {
$("#DatePickerName").datepicker(navigator.userLanguage,
$.datepicker.regional[$('#hdn_Locale').val()]);
}
});
Upvotes: 3
Reputation: 356
i managed to get this working i had wrapped the language in the jquery ui on select part which was no longer needed as i had declare the dateformat and mindate option previously heres the code once everything was working properly
<script type="text/javascript">
//<![CDATA[
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
$( "#from" ).datepicker({
defaultDate: "+4w",
changeMonth: true,
numberOfMonths: 2,
showButtonPanel: true,
showOn: "button",
buttonImage: "../images/calendar.gif",
buttonImageOnly: true,
minDate:"+1d",
dateFormat:"yy/mm/dd",
showAnim:"blind",
});
$( "#from" ).datepicker( $.datepicker.regional[ "en-GB" ] );
$( "#locale" ).change(function() {
$( "#from" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
$( "#to" ).datepicker({
defaultDate: "+2w",
changeMonth: true,
numberOfMonths: 2,
showButtonPanel: true,
showOn: "button",
buttonImage: "../images/calendar.gif",
buttonImageOnly: true,
minDate:"",
dateFormat:"yy/mm/dd",
showAnim:"blind",
});
$( "#to" ).datepicker( $.datepicker.regional[ "en-GB" ] );
$( "#locale" ).change(function() {
$( "#to" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
});
//]]>
</script>
Upvotes: 0
Reputation: 131
I have tried the code I have written below (adopted from your code) and it works. Maybe you forgot to include the jquery javascript for each language? I have only included three languages (e.g. french) as an example. Also I have the change event for the select option triggering on the language, rather than triggering on the onSelect.
I also tried your version of putting it into one function and that works except that because its triggering on the select it's necessary to select a date first before it will start to work, and then a language after that.
First version (in one function, works but problem that doesn't display in a language until a date is first selected):
<html><head><title>Test1</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker-ar.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker-af.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker-en-GB.js"></script>
</head><body>
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
$( "#from" ).datepicker({
defaultDate: "+4w",
changeMonth: true,
numberOfMonths: 3,
showButtonPanel: true,
showOn: "button",
minDate:"+1d",
dateFormat:"yy/mm/dd",
showAnim:"bounce",
onSelect: function( selectedDate ) {
$( "#from" ).datepicker( $.datepicker.regional[ "en-GB" ] );
$( "#locale" ).change(function() {
$( "#from" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
}
});
});
</script>
<p>Date: <input type="text" id="from"/>
<select id="locale">
<option value="af">Afrikaans</option>
<option value="sq">Albanian (Gjuha shqipe)</option>
<option value="ar-DZ">Algerian Arabic</option>
<option value="ar">Arabic (‫(لعربي</option>
<option value="hy">Armenian (Հայերեն)</option>
<option value="az">Azerbaijani (Azərbaycan dili)</option>
<option value="eu">Basque (Euskara)</option>
<option value="bs">Bosnian (Bosanski)</option>
<option value="bg">Bulgarian (български език)</option>
<option value="ca">Catalan (Català)</option>
<option value="zh-HK">Chinese Hong Kong (繁體中文)</option>
<option value="zh-CN">Chinese Simplified (简体中文)</option>
<option value="zh-TW">Chinese Traditional (繁體中文)</option>
<option value="hr">Croatian (Hrvatski jezik)</option>
<option value="cs">Czech (čeština)</option>
<option value="da">Danish (Dansk)</option>
<option value="nl-BE">Dutch (Belgium)</option>
<option value="nl">Dutch (Nederlands)</option>
<option value="en-AU">English/Australia</option>
<option value="en-NZ">English/New Zealand</option>
<option value="en-GB">English/UK</option>
<option value="eo">Esperanto</option>
<option value="et">Estonian (eesti keel)</option>
<option value="fo">Faroese (føroyskt)</option>
<option value="fa">Farsi/Persian (‫(فارسی</option>
<option value="fi">Finnish (suomi)</option>
<option value="fr" selected="selected">French (Français)</option>
<option value="fr-CH">French/Swiss (Français de Suisse)</option>
<option value="gl">Galician</option>
<option value="ge">Georgian</option>
<option value="de">German (Deutsch)</option>
<option value="el">Greek (Ελληνικά)</option>
<option value="he">Hebrew (‫(עברית</option>
<option value="hi">Hindi (हिंदी)</option>
<option value="hu">Hungarian (Magyar)</option>
<option value="is">Icelandic (Õslenska)</option>
<option value="id">Indonesian (Bahasa Indonesia)</option>
<option value="it">Italian (Italiano)</option>
<option value="ja">Japanese (日本語)</option>
<option value="kk">Kazakhstan (Kazakh)</option>
<option value="km">Khmer</option>
<option value="ko">Korean (한국어)</option>
<option value="lv">Latvian (Latvieöu Valoda)</option>
<option value="lt">Lithuanian (lietuviu kalba)</option>
<option value="lb">Luxembourgish</option>
<option value="mk">Macedonian</option>
<option value="ml">Malayalam</option>
<option value="ms">Malaysian (Bahasa Malaysia)</option>
<option value="no">Norwegian (Norsk)</option>
<option value="pl">Polish (Polski)</option>
<option value="pt">Portuguese (Português)</option>
<option value="pt-BR">Portuguese/Brazilian (Português)</option>
<option value="rm">Rhaeto-Romanic (Romansh)</option>
<option value="ro">Romanian (Română)</option>
<option value="ru">Russian (Русский)</option>
<option value="sr">Serbian (српски језик)</option>
<option value="sr-SR">Serbian (srpski jezik)</option>
<option value="sk">Slovak (Slovencina)</option>
<option value="sl">Slovenian (Slovenski Jezik)</option>
<option value="es">Spanish (Español)</option>
<option value="sv">Swedish (Svenska)</option>
<option value="ta">Tamil (தமிழ்)</option>
<option value="th">Thai (ภาษาไทย)</option>
<option value="tj">Tajikistan</option>
<option value="tr">Turkish (Türkçe)</option>
<option value="uk">Ukranian (Українська)</option>
<option value="vi">Vietnamese (Tiếng Việt)</option>
<option value="cy-GB">Welsh/UK (Cymraeg)</option>
</select></p>
</body></html>
Second version (not in one function, also works, seems to work better to me because you don't have to select a date for it to change language):
<html><head><title>Test1</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker-ar.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker-af.js"></script>
</head><body>
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
$( "#from" ).datepicker({
defaultDate: "+4w",
changeMonth: true,
numberOfMonths: 3,
showButtonPanel: true,
showOn: "button",
minDate:"+1d",
dateFormat:"yy/mm/dd",
showAnim:"bounce"
});
$( "#from" ).datepicker( $.datepicker.regional[ "en-GB" ] );
$( "#locale" ).change(function() {
$( "#from" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
});
</script>
<p>Date: <input type="text" id="from"/>
<select id="locale">
<option value="af">Afrikaans</option>
<option value="sq">Albanian (Gjuha shqipe)</option>
<option value="ar-DZ">Algerian Arabic</option>
<option value="ar">Arabic (‫(لعربي</option>
<option value="hy">Armenian (Հայերեն)</option>
<option value="az">Azerbaijani (Azərbaycan dili)</option>
<option value="eu">Basque (Euskara)</option>
<option value="bs">Bosnian (Bosanski)</option>
<option value="bg">Bulgarian (български език)</option>
<option value="ca">Catalan (Català)</option>
<option value="zh-HK">Chinese Hong Kong (繁體中文)</option>
<option value="zh-CN">Chinese Simplified (简体中文)</option>
<option value="zh-TW">Chinese Traditional (繁體中文)</option>
<option value="hr">Croatian (Hrvatski jezik)</option>
<option value="cs">Czech (čeština)</option>
<option value="da">Danish (Dansk)</option>
<option value="nl-BE">Dutch (Belgium)</option>
<option value="nl">Dutch (Nederlands)</option>
<option value="en-AU">English/Australia</option>
<option value="en-NZ">English/New Zealand</option>
<option value="en-GB">English/UK</option>
<option value="eo">Esperanto</option>
<option value="et">Estonian (eesti keel)</option>
<option value="fo">Faroese (føroyskt)</option>
<option value="fa">Farsi/Persian (‫(فارسی</option>
<option value="fi">Finnish (suomi)</option>
<option value="fr" selected="selected">French (Français)</option>
<option value="fr-CH">French/Swiss (Français de Suisse)</option>
<option value="gl">Galician</option>
<option value="ge">Georgian</option>
<option value="de">German (Deutsch)</option>
<option value="el">Greek (Ελληνικά)</option>
<option value="he">Hebrew (‫(עברית</option>
<option value="hi">Hindi (हिंदी)</option>
<option value="hu">Hungarian (Magyar)</option>
<option value="is">Icelandic (Õslenska)</option>
<option value="id">Indonesian (Bahasa Indonesia)</option>
<option value="it">Italian (Italiano)</option>
<option value="ja">Japanese (日本語)</option>
<option value="kk">Kazakhstan (Kazakh)</option>
<option value="km">Khmer</option>
<option value="ko">Korean (한국어)</option>
<option value="lv">Latvian (Latvieöu Valoda)</option>
<option value="lt">Lithuanian (lietuviu kalba)</option>
<option value="lb">Luxembourgish</option>
<option value="mk">Macedonian</option>
<option value="ml">Malayalam</option>
<option value="ms">Malaysian (Bahasa Malaysia)</option>
<option value="no">Norwegian (Norsk)</option>
<option value="pl">Polish (Polski)</option>
<option value="pt">Portuguese (Português)</option>
<option value="pt-BR">Portuguese/Brazilian (Português)</option>
<option value="rm">Rhaeto-Romanic (Romansh)</option>
<option value="ro">Romanian (Română)</option>
<option value="ru">Russian (Русский)</option>
<option value="sr">Serbian (српски језик)</option>
<option value="sr-SR">Serbian (srpski jezik)</option>
<option value="sk">Slovak (Slovencina)</option>
<option value="sl">Slovenian (Slovenski Jezik)</option>
<option value="es">Spanish (Español)</option>
<option value="sv">Swedish (Svenska)</option>
<option value="ta">Tamil (தமிழ்)</option>
<option value="th">Thai (ภาษาไทย)</option>
<option value="tj">Tajikistan</option>
<option value="tr">Turkish (Türkçe)</option>
<option value="uk">Ukranian (Українська)</option>
<option value="vi">Vietnamese (Tiếng Việt)</option>
<option value="cy-GB">Welsh/UK (Cymraeg)</option>
</select></p>
</body></html>
References:
http://jqueryui.com/demos/datepicker/#localization
http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/
Upvotes: 3