2012-07-20 15 views
6

हाय लोग अलग-अलग jquery-ui डेटपिकर विकल्पों को एक फ़ंक्शन में गठबंधन करने की कोशिश कर रहे हैं, मैं भाषा से अधिकांश स्क्रिप्ट वर्किंग एपर्ट प्राप्त कर सकता हूं जिसमें मेरे पास सभी il8n फ़ाइलें हैं और मैं एक चयन का उपयोग कर रहा हूं तत्व मान बदलने के लिए लेकिन कुछ भी काम करने किसी को भी मुझे बता सकते हैं लगता है क्या im गलतjquery-ui डेटपिकर एकाधिक भाषा एकीकरण

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

उत्तर

0

मैं इस काम के मैं जो अब जरूरत थी के रूप में मैं था DateFormat और mindate विकल्प पहले से यहाँ कोड एक बार सब कुछ ठीक से काम कर रहा था की घोषणा का चयन ओर से jQuery ui में भाषा लपेटा था पाने में कामयाब रहे

<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> 
3

कर मैं (अपने कोड से अपनाया) कोड मैं नीचे लिखा है की कोशिश की है और यह काम करता है। हो सकता है कि आप प्रत्येक भाषा के लिए jquery जावास्क्रिप्ट को शामिल करना भूल गए? मैंने केवल उदाहरण के रूप में तीन भाषाओं (जैसे फ्रेंच) को शामिल किया है। इसके अलावा मेरे पास चयन पर ट्रिगर करने के बजाय, भाषा पर ट्रिगर करने के लिए चुनिंदा विकल्प के लिए परिवर्तन ईवेंट है।

मैंने इसे एक फ़ंक्शन में डालने के आपके संस्करण को भी आजमाया और यह उस कार्य को छोड़कर काम करता है क्योंकि इसे चुनने पर ट्रिगर करने से पहले एक तारीख का चयन करना शुरू हो जाएगा, और उसके बाद एक भाषा।

पहले संस्करण (एक समारोह में, काम करता है लेकिन समस्या यह है कि एक भाषा में प्रदर्शित नहीं करता है जब तक एक तारीख पहले चयन किया जाता है):

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

दूसरा संस्करण (नहीं एक समारोह में, यह भी काम करता है, लगता है मेरे लिए बेहतर काम करते हैं क्योंकि आप एक तिथि का चयन करने के लिए यह भाषा बदलने के लिए के लिए नहीं है):

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

संदर्भ:

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

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

3

खैर, यह मुझे लगभग एक पूरा दिन ले लिया स्थानीयकरण मेरी jQuery DatePicker पर काम कर पाने के लिए:

चरण 1: एक के साथ एक जे एस फ़ाइल बनाएं एक सामान्य फ़ाइल में सभी भाषाओं (जिसके लिए आप अनुवाद दिखाना चाहते हैं) के लिए अनुवाद नाम आदि के लिए अनुवाद करेंगे और इसे नाम दें jquery.ui.datepicker-common.js (या जो भी आपको पसंद है) (आप कर सकते हैं सभी आवश्यक भाषाओं के लिए अलग जे एस फ़ाइलों के रूप में अच्छी तरह से और नाम के रूप में बना सकते हैं - फ्रेंच फ़ाइल के लिए jquery.ui.datepicker-fr.js)

चरण 2: शामिल करें इस वेबपेज में फ़ाइल जे एस, जहाँ आप चाहते हैं अनुवादित मूल्य प्रकट होने के लिए।

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

चरण 3: DatePicker अनुवाद भाषा का प्रयोग करने के लिए इस उदाहरण का पालन करें। DatePickerName पर अपना डेटपिकर नाम पेस्ट करें। अपना नियंत्रण नाम चिपकाएं जो वर्तमान भाषा को hdn_Locale (जैसा कि उदाहरण में उपयोग किया गया है) में रखें।

$("#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()]); 
     } 
}); 
संबंधित मुद्दे