All geek questions in one place

Jquery-ui datepicker multilingual integration

Hi guys, I'm trying to combine different jqery-ui datepicker parameters into one function, I can get most of the working script application from the language, I have all il8n files, and I use the select element to change the value but nothing works, can anyone -Never tell me what I'm 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>
+6
source share
3 answers

I managed to get this working, I wrapped the language in jquery ui on the highlighted part, which is no longer needed, as I announced that the dateformat and mindate parameter used code before, when everything works fine

 <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>
0
source

I tried the code that I wrote below (adopted from your code) and it works. Maybe you forgot to include jquery javascript for each language? As an example, I have included only three languages ​​(e.g. French). In addition, I have a change event to select an option in the language, rather than triggering onSelect.

I also tried your version of including it in one function, and this works, except that since it is optional, you must select the date first before it starts working, and then the language after that.

The first version (it works in one function, but a problem that does not appear in the language until a date is 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"/>&nbsp; <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 (&#8235;(&#1604;&#1593;&#1585;&#1576;&#1610;</option> <option value="hy">Armenian (&#1344;&#1377;&#1397;&#1381;&#1408;&#1381;&#1398;)</option> <option value="az">Azerbaijani (Az&#601;rbaycan dili)</option> <option value="eu">Basque (Euskara)</option> <option value="bs">Bosnian (Bosanski)</option> <option value="bg">Bulgarian (&#1073;&#1098;&#1083;&#1075;&#1072;&#1088;&#1089;&#1082;&#1080; &#1077;&#1079;&#1080;&#1082;)</option> <option value="ca">Catalan (Catal&agrave;)</option> <option value="zh-HK">Chinese Hong Kong (&#32321;&#39636;&#20013;&#25991;)</option> <option value="zh-CN">Chinese Simplified (&#31616;&#20307;&#20013;&#25991;)</option> <option value="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option> <option value="hr">Croatian (Hrvatski jezik)</option> <option value="cs">Czech (&#269;e&#353;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&oslash;royskt)</option> <option value="fa">Farsi/Persian (&#8235;(&#1601;&#1575;&#1585;&#1587;&#1740;</option> <option value="fi">Finnish (suomi)</option> <option value="fr" selected="selected">French (Fran&ccedil;ais)</option> <option value="fr-CH">French/Swiss (Fran&ccedil;ais de Suisse)</option> <option value="gl">Galician</option> <option value="ge">Georgian</option> <option value="de">German (Deutsch)</option> <option value="el">Greek (&#917;&#955;&#955;&#951;&#957;&#953;&#954;&#940;)</option> <option value="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</option> <option value="hi">Hindi (&#2361;&#2367;&#2306;&#2342;&#2368;)</option> <option value="hu">Hungarian (Magyar)</option> <option value="is">Icelandic (&Otilde;slenska)</option> <option value="id">Indonesian (Bahasa Indonesia)</option> <option value="it">Italian (Italiano)</option> <option value="ja">Japanese (&#26085;&#26412;&#35486;)</option> <option value="kk">Kazakhstan (Kazakh)</option> <option value="km">Khmer</option> <option value="ko">Korean (&#54620;&#44397;&#50612;)</option> <option value="lv">Latvian (Latvie&ouml;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&ecirc;s)</option> <option value="pt-BR">Portuguese/Brazilian (Portugu&ecirc;s)</option> <option value="rm">Rhaeto-Romanic (Romansh)</option> <option value="ro">Romanian (Rom&acirc;n&#259;)</option> <option value="ru">Russian (&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;)</option> <option value="sr">Serbian (&#1089;&#1088;&#1087;&#1089;&#1082;&#1080; &#1112;&#1077;&#1079;&#1080;&#1082;)</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&ntilde;ol)</option> <option value="sv">Swedish (Svenska)</option> <option value="ta">Tamil (&#2980;&#2990;&#3007;&#2996;&#3021;)</option> <option value="th">Thai (&#3616;&#3634;&#3625;&#3634;&#3652;&#3607;&#3618;)</option> <option value="tj">Tajikistan</option> <option value="tr">Turkish (T&uuml;rk&ccedil;e)</option> <option value="uk">Ukranian (&#1059;&#1082;&#1088;&#1072;&#1111;&#1085;&#1089;&#1100;&#1082;&#1072;)</option> <option value="vi">Vietnamese (Ti&#7871;ng Vi&#7879;t)</option> <option value="cy-GB">Welsh/UK (Cymraeg)</option> </select></p> </body></html>

The second version (not in one function, also works, it seems to work better for me, because you do not need to select a date for its language change):

 <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"/>&nbsp; <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 (&#8235;(&#1604;&#1593;&#1585;&#1576;&#1610;</option> <option value="hy">Armenian (&#1344;&#1377;&#1397;&#1381;&#1408;&#1381;&#1398;)</option> <option value="az">Azerbaijani (Az&#601;rbaycan dili)</option> <option value="eu">Basque (Euskara)</option> <option value="bs">Bosnian (Bosanski)</option> <option value="bg">Bulgarian (&#1073;&#1098;&#1083;&#1075;&#1072;&#1088;&#1089;&#1082;&#1080; &#1077;&#1079;&#1080;&#1082;)</option> <option value="ca">Catalan (Catal&agrave;)</option> <option value="zh-HK">Chinese Hong Kong (&#32321;&#39636;&#20013;&#25991;)</option> <option value="zh-CN">Chinese Simplified (&#31616;&#20307;&#20013;&#25991;)</option> <option value="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option> <option value="hr">Croatian (Hrvatski jezik)</option> <option value="cs">Czech (&#269;e&#353;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&oslash;royskt)</option> <option value="fa">Farsi/Persian (&#8235;(&#1601;&#1575;&#1585;&#1587;&#1740;</option> <option value="fi">Finnish (suomi)</option> <option value="fr" selected="selected">French (Fran&ccedil;ais)</option> <option value="fr-CH">French/Swiss (Fran&ccedil;ais de Suisse)</option> <option value="gl">Galician</option> <option value="ge">Georgian</option> <option value="de">German (Deutsch)</option> <option value="el">Greek (&#917;&#955;&#955;&#951;&#957;&#953;&#954;&#940;)</option> <option value="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</option> <option value="hi">Hindi (&#2361;&#2367;&#2306;&#2342;&#2368;)</option> <option value="hu">Hungarian (Magyar)</option> <option value="is">Icelandic (&Otilde;slenska)</option> <option value="id">Indonesian (Bahasa Indonesia)</option> <option value="it">Italian (Italiano)</option> <option value="ja">Japanese (&#26085;&#26412;&#35486;)</option> <option value="kk">Kazakhstan (Kazakh)</option> <option value="km">Khmer</option> <option value="ko">Korean (&#54620;&#44397;&#50612;)</option> <option value="lv">Latvian (Latvie&ouml;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&ecirc;s)</option> <option value="pt-BR">Portuguese/Brazilian (Portugu&ecirc;s)</option> <option value="rm">Rhaeto-Romanic (Romansh)</option> <option value="ro">Romanian (Rom&acirc;n&#259;)</option> <option value="ru">Russian (&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;)</option> <option value="sr">Serbian (&#1089;&#1088;&#1087;&#1089;&#1082;&#1080; &#1112;&#1077;&#1079;&#1080;&#1082;)</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&ntilde;ol)</option> <option value="sv">Swedish (Svenska)</option> <option value="ta">Tamil (&#2980;&#2990;&#3007;&#2996;&#3021;)</option> <option value="th">Thai (&#3616;&#3634;&#3625;&#3634;&#3652;&#3607;&#3618;)</option> <option value="tj">Tajikistan</option> <option value="tr">Turkish (T&uuml;rk&ccedil;e)</option> <option value="uk">Ukranian (&#1059;&#1082;&#1088;&#1072;&#1111;&#1085;&#1089;&#1100;&#1082;&#1072;)</option> <option value="vi">Vietnamese (Ti&#7871;ng Vi&#7879;t)</option> <option value="cy-GB">Welsh/UK (Cymraeg)</option> </select></p> </body></html>

Literature:

http://jqueryui.com/demos/datepicker/#localization

http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/

+3
source

Well, it took me almost one full day for the localization to work on my jQuery DatePicker:

Step 1: Create a JS file with all the translation names for months, etc. for all languages ​​(for which you want translations to appear) in one common file and name it as jquery.ui. datepicker-common.js (or whatever you like) (you can create separate JS files for all necessary languages, as well as the name -jquery.ui.datepicker-fr.js for the French file)

Step 2: Include this JS file on the web page where you want the translated values ​​to be displayed.

 <script src="Assets/JS/JQuery/jquery.ui.datepicker-fr.js" type="text/javascript"></script>

Step 3: Follow this example to force DatePicker to use a translated language. Paste the name of your dumper into DatePickerName . Insert your control name that holds the current language in hdn_Locale (as used in the 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()]); } });
+3
source

Source: https://habr.com/ru/post/920932/

More articles:


All Articles