2012-07-20 36 views
6

hi guys im cố gắng kết hợp các tùy chọn jquery-ui datepicker khác nhau vào một chức năng tôi có thể nhận được hầu hết các kịch bản làm việc appart từ ngôn ngữ tôi có tất cả các tập tin il8n và tôi đang sử dụng một lựa chọn yếu tố để thay đổi giá trị nhưng không có gì vẻ là làm việc bất cứ ai có thể cho tôi biết những gì im làm saijquery-ui datepicker đa ngôn ngữ tích hợp

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

Trả lời

0

tôi quản lý để làm việc này tôi đã bọc ngôn ngữ trong ui jquery trên một số phần mà không còn cần thiết như tôi đã tuyên bố lựa chọn DateFormat và mindate trước heres mã một lần tất cả mọi thứ đã được làm việc đúng cách

<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

tôi đã thử đoạn code tôi đã viết dưới đây (áp dụng từ mã của bạn) và nó hoạt động. Có lẽ bạn quên bao gồm javascript jquery cho mỗi ngôn ngữ? Tôi chỉ bao gồm ba ngôn ngữ (ví dụ: tiếng Pháp) làm ví dụ. Ngoài ra tôi có sự kiện thay đổi cho tùy chọn chọn kích hoạt trên ngôn ngữ, thay vì kích hoạt trên onSelect.

Tôi cũng đã thử phiên bản đưa nó vào một chức năng và hoạt động ngoại trừ vì nó kích hoạt trên lựa chọn cần thiết để chọn ngày đầu tiên trước khi bắt đầu hoạt động và sau đó là ngôn ngữ.

Phiên bản đầu tiên (trong một chức năng, hoạt động nhưng vấn đề mà không hiển thị trong một ngôn ngữ cho đến một ngày được chọn đầu tiên):

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

phiên bản thứ hai (không phải trong một chức năng, cũng làm việc, dường như làm việc tốt hơn với tôi bởi vì bạn không cần phải chọn một ngày cho nó để thay đổi ngôn ngữ):

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

Tài liệu tham khảo:

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

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

3

Vâng, nó đã cho tôi gần như một ngày đầy đủ để có được các địa phương làm việc trên jQuery DatePicker tôi:

Bước 1: Tạo một file JS với một ll các bản dịch cho tháng tên vv cho tất cả các ngôn ngữ (mà bạn muốn bản dịch xuất hiện) trong một tệp phổ biến và đặt tên là jquery.ui.datepicker-common.js (hoặc những gì bạn muốn) (bạn có thể tạo ra các file JS riêng biệt cho tất cả các ngôn ngữ được yêu cầu như tốt và tên như - jquery.ui.datepicker-fr.js cho file tiếng Pháp)

Bước 2: Bao gồm này JS tập tin trong trang web, nơi bạn muốn các giá trị đã dịch sẽ xuất hiện.

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

Bước 3: Thực hiện theo ví dụ này để làm DatePicker sử dụng ngôn ngữ dịch. Dán tên ngày của bạn vào ngày DatePickerName. Dán tên điều khiển giữ Ngôn ngữ hiện tại trong hdn_Locale (như được sử dụng trong ví dụ).

$("#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()]); 
     } 
}); 
Các vấn đề liên quan