jquery-ui datepicker integración de múltiples idiomas

Hola chicos estoy tratando de combinar las diferentes opciones de jquery-ui datepicker en una sola función. Puedo obtener la mayor parte del script trabajando, además del lenguaje, tengo todos los archivos il8n y estoy usando un elemento para cambiar el valor, pero nada parece estar funcionando puede alguien decirme lo que estoy haciendo maljquery-ui datepicker integración de múltiples idiomas

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

Fuente

2012-07-20 dom

logré conseguir este trabajo que había envuelto el idioma en la interfaz de usuario jQuery en la parte de selección que ya no era necesaria, ya que tenía declarar la opción dateformat y MinDate previamente aquí está el código una vez que todo estaba funcionando correctamente

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

Fuente

2012-07-21 00:52:05 dom

he probado el código que he escrito a continuación (adoptada a partir del código) y funciona. ¿Tal vez se olvidó de incluir el javascript jquery para cada idioma? Solo he incluido tres idiomas (por ejemplo, francés) como ejemplo. También tengo el evento de cambio para la activación de la opción de selección en el idioma, en lugar de activarlo en onSelect.

También probé su versión de ponerlo en una función y eso funciona, excepto que debido a su activación en el seleccionar, es necesario seleccionar primero una fecha antes de que comience a funcionar, y luego un idioma después de eso.

Primera versión (en una función, funciona, pero un problema que no se muestra en un idioma hasta la fecha se ha seleccionado en primer lugar):

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

Segunda versión (no en una función, también funciona, parece funcionar mejor para mí, ya que no tiene que seleccionar una fecha para que cambie de idioma):

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

Referencias:

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

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

Fuente

2012-07-20 02:11:46 Jevan

Bueno, me llevó casi un día completo para obtener la localización trabajando en mi jQuery DatePicker:

Paso 1: crear un archivo JS con una ll las Traducciones de nombres de mes, etc. para todos los idiomas (para los que desea que aparezcan las traducciones) en un archivo común y asígnele el nombre jquery.ui.datepicker-common.js (o lo que guste) (puede crear archivos JS separados para todos los idiomas necesarios, así como nombre y - jquery.ui.datepicker-fr.js de archivo francesa)

Paso 2: Incluir este JS archivo en la página web, en la que desea los valores traducidos para aparecer

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

Paso 3: Siga este ejemplo para hacer DatePicker utilizar el idioma traducido. Pegue su nombre de datepicker en DatePickerName. Pegue su nombre de control que contenga el idioma actual en hdn_Locale (como se usa en el ejemplo).

$("#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()]); 
     } 
});

Fuente

2013-01-23 11:45:44 Nitasha

jquery-ui datepicker integración de múltiples idiomas

Respuesta

Cuestiones relacionadas