Datepicker总是以简体中文显示?

时间:2012-04-13 08:14:24

标签: jquery internationalization datepicker

我正在尝试使用JQueryUI datepicker来显示法语/英语本地化,但只显示简体中文。我做错了什么?

由于

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/i18n/jquery-ui-i18n.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css" />
    <script>
        $(document).ready(function () {
            $('#datepicker').datepicker();
            $.datepicker.setDefaults($.datepicker.regional['fr-FR']);
            $('#datepicker').datepicker($.datepicker.regional['fr-FR']);                
        });
    </script>
</head>

<body>
    <label for="datepicker">Date: </label>
    <input type="text" id="datepicker" />
</body>
</html>

3 个答案:

答案 0 :(得分:4)

Datepicker Documentation (Localization)

  

Datepicker支持本地化其内容,以满足不同的语言和日期格式。每个本地化都包含在其自己的文件中,并且语言代码附加在名称上,例如,法语的jquery.ui.datepicker-fr.js。应在主datepicker代码之后包含所需的本地化文件。他们将自己的设置添加到可用本地化集中,并自动将其应用为所有实例的默认设置。

(您需要包含正确的本地化文件)

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/i18n/jquery.ui.datepicker-fr.min.js"></script>

然后改变:

$.datepicker.setDefaults($.datepicker.regional['fr-FR']);

要:

$.datepicker.setDefaults($.datepicker.regional['fr']);

答案 1 :(得分:3)

日期选择器的jQuery UI脚本中存在命名(或缺少)本地化的问题。例如,您可能从浏览器语言或服务器端获得特定文化“fr-FR”,但“区域”名称不包括每个回退文化的特定条目,例如:只是“fr”不是从“fr-FR”到“fr”的映射。

我建议包含完整的jquery-ui-i18n.js脚本(例如在NuGet上可用作“jQuery.UI.i18n”),然后创建一个全局帮助函数来引入回退和默认情况下不支持(即使用“”,这是没有找到英语美国而不是返回导致中文出现的“未定义”。

e.g。将此功能添加到您的站点/页面:

  

///&LT;总结&gt;
///检索等效日期选取器 “区域”(本地化名)
///用于与回退,
//一个ISO本地化名称/ EG “去-DE” 回落到 “德”,EN或EN-US是默认
/// Unsuported文化将返回默认值(美国英语)
///&LT; /总结&gt;
///&LT;备注&GT;
///假定无论是 “的jquery-UI-i18n.js” 组合库或个人区域脚本已经装载
///&LT; /总结&gt;
功能GetDatePickerRegion(区域){

//尝试直接获得区域(具有相同名称)
VAR区域= $ .datepicker.regional [区域]; <登记/>如果(!区域=未定义)
返回区;

//回退时区域特定(例如 “去DE” “去”)
如果(区域设置。长度大于2){
区域= $ .datepicker.regional [locale.substring(0,2)];如果
(区=未定义)
返回区域; <!BR / >}

//返回默认区域
区域= $ .DAT epicker.regional [ “”];
返回区;
}

然后在初始化期间调用它,如:

  

//设置jQuery的培养相应
变种datePickerRegion = GetDatePickerRegion(浏览器语言);
$ .datepicker.setDefaults(datePickerRegion);

您还可以在浏览器,服务器和客户端脚本之间存储和传递语言。通过检测浏览器语言服务器端,允许它在cookie和/或服务器数据库中被覆盖/保留,我更喜欢我认为遵循HTTP和HTML标准的东西,但最重要的是将其传回并通过使用“lang”属性:

  

//从发出meta标签服务器浏览器的语言首选项。
//应该是服务器的cookie设置为允许语言覆盖和持久性。
变种浏览器语言= $(“\ HTML”)。 ATTR( “郎”);如果
(浏览器语言!)
浏览器语言= “EN-US”; //未指定时,使用默认

将来你要做的就是更新jQuery UI包或添加你自己的翻译(这将使用相同的例程)。 HTML“lang”属性也有助于搜索引擎优化(假设您的内容实际上不仅仅是日期选择器)。

答案 2 :(得分:0)

你需要这样做:

 $.datepicker.regional['fr'] = {clearText: 'Effacer', clearStatus: '',
    closeText: 'Fermer', closeStatus: 'Fermer sans modifier',
    prevText: '<Préc', prevStatus: 'Voir le mois précédent',
    nextText: 'Suiv>', nextStatus: 'Voir le mois suivant',
    currentText: 'Courant', currentStatus: 'Voir le mois courant',
    monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
    'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
    monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
    'Jul','Aoû','Sep','Oct','Nov','Déc'],
    monthStatus: 'Voir un autre mois', yearStatus: 'Voir un autre année',
    weekHeader: 'Sm', weekStatus: '',
    dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
    dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
    dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
    dayStatus: 'Utiliser DD comme premier jour de la semaine', dateStatus: 'Choisir le DD, MM d',
    dateFormat: 'dd/mm/yy', firstDay: 0, 
    initStatus: 'Choisir la date', isRTL: false};
 $.datepicker.setDefaults($.datepicker.regional['fr']);