Datepicker总是简体中文显示？答案

【问题标题】：Datepicker is always displayed in Simplified Chinese?Datepicker总是简体中文显示？
【发布时间】：2013-08-20 20:07:54
【问题描述】：

我正在尝试让 JQueryUI 日期选择器显示法语/英语本地化，但只显示简体中文。我做错了什么？

谢谢

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

【问题讨论】：

试试$.datepicker.regional['fr']
那也不行
你加入了jquery.ui.datepicker-fr.js吗？在此处阅读本地化部分以获取更多信息：jqueryui.com/demos/datepicker/#localization

标签： jquery internationalization datepicker

【解决方案1】：

Datepicker Documentation (Localization)

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

（您需要包含正确的本地化文件）

<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']);

【讨论】：

谢谢，这行得通。是否可以使用脚本 ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/i18n/… ？展望未来，我们会有很多本地化，我不希望每个脚本都包含一个单独的脚本？
试试$.datepicker.regional['fr-CH']（那里似乎有一些法语翻译）
谢谢 - 这行得通 - 以及 $.datepicker.setDefaults($.datepicker.regional.fr);

【解决方案2】：

日期选择器的 jQuery UI 脚本中的命名（或缺少）本地化存在问题。例如，您可能会从浏览器语言或服务器端获得特定的文化“fr-FR”，但“区域”名称不包含每种后备文化的特定条目，例如只是“fr”而不是从“fr-FR”到“fr”的映射。

我建议包含完整的 jquery-ui-i18n.js 脚本（例如，在 NuGet 上以“jQuery.UI.i18n”的形式提供），然后创建一个全局帮助函数以在不受支持时引入回退和默认值（即使用“”，即英文 US when not found 而不是返回导致中文出现的“undefined”）。

例如将此功能添加到您的网站/页面：

///

/// 检索等效的日期选择器“区域”（本地化名称）
/// 用于带有后备的 ISO 本地化名称，
/// 例如“de-DE”返回到“de”，en 或 en-US 是默认值。
/// 不受支持的文化将返回默认值（美国英语）。
///

///
/// 假设“jquery-ui-i18n.js”组合库或单个区域脚本已被加载。
///
函数GetDatePickerRegion( locale) {

    // 尝试直接获取区域（使用相同的名称）
    var region = $.datepicker.regional[locale];
    if （区域！= 未定义）
return region;

    // 当区域特定时回退（例如，“de-DE”到“de”）
    if (locale.length > 2) {
        region = $.datepicker.regional[ locale.substring(0, 2)];
         if (region != undefined)
           返回区域；
    }

    // 返回默认区域
    region = $.datepicker。区域[“”]；
    返回区域；
}

然后在初始化时调用它：

    // 相应地设置 jQuery 文化
    var datePickerRegion = GetDatePickerRegion(browserLanguage);
    $.datepicker.setDefaults(datePickerRegion);

同样相关的是您如何在浏览器、服务器和客户端脚本之间存储和传递您的语言。我更喜欢通过检测服务器端的浏览器语言来密切遵循 HTTP 和 HTML 标准，允许它在 cookie 和/或服务器数据库中被覆盖/持久化，但最重要的是通过使用将其传回并持久化在文档中“语言”属性：

    // 从服务器发出的元标记中获取浏览器语言偏好。
    // 应由服务器使用 cookie 设置，以允许语言覆盖和持久性。
    var browserLanguage = $("\html").attr( "lang");
    if (!browserLanguage)
        browserLanguage = “en-US”; // 在未指定时使用默认值

您以后要做的就是更新 jQuery UI 包或添加您自己的翻译（这将使用相同的例程）。 HTML“lang”属性还有助于搜索引擎优化（假设您的内容实际上已本地化，而不仅仅是日期选择器）。

【讨论】：

【解决方案3】：

你需要这样做：

 $.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']);

【讨论】：