Datepicker is always displayed in Simplified Chinese?

问题

i'm trying to get the JQueryUI datepicker to display French/English localisations, but only Simplified Chinese is being displayed. What am I doing wrong?

Thanks

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

回答1:

Datepicker Documentation (Localization)

Datepicker provides support for localizing its content to cater for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g. jquery.ui.datepicker-fr.js for French. The desired localization file should be included after the main datepicker code. They add their settings to the set of available localizations and automatically apply them as defaults for all instances.

(You need to include the correct localization file)

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

Then change:

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

To:

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

回答2:

There is an issue with the naming (or lack of) localizations in the jQuery UI scripts for the date picker. For example, you probably get a specific culture "fr-FR" from the browser languages or server-side, but the "region" names don't include specific entries for each fallback culture, e.g. just "fr" not a mapping from "fr-FR" back to "fr".

I recommend including the full jquery-ui-i18n.js script (e.g. available on NuGet as "jQuery.UI.i18n") then creating one global helper function to introduce fallback and default when unsupported (i.e. use "" which is English US when not found rather than returning "undefined" which causes Chinese to appear).

e.g. Add this function to your site/page:

/// <summary>
/// Retrieves the equivalent date picker "region" (localization name)
/// for an ISO localization name with fallback,
/// e.g. "de-DE" falls back to "de", en or en-US is default.
/// Unsuported cultures will return the default (English US).
/// </summary>
/// <remarks>
/// Assumes either the "jquery-ui-i18n.js" combined library or individual region scripts have been loaded.
/// </summary>
function GetDatePickerRegion(locale) {

    // Try to get region directly (with the same name)
    var region = $.datepicker.regional[locale];
    if (region != undefined)
        return region;

    // Fallback when region specific (e.g. "de-DE" to "de")
    if (locale.length > 2) {
        region = $.datepicker.regional[locale.substring(0, 2)];
        if (region != undefined)
            return region;
    }

    // Return default region
    region = $.datepicker.regional[""];
    return region;
}

Then call it during initialization like:

    // Set jQuery culture accordingly
    var datePickerRegion = GetDatePickerRegion(browserLanguage);
    $.datepicker.setDefaults(datePickerRegion);

Also relevant is how you store and pass your language between the browser, server and client script. I prefer what I feel follows HTTP and HTML standards closely by detecting the browser language server-side, allowing it to be overridden/persisted in a cookie and/or server database, but most importantly passing it back and persisting in the document by using the "lang" attribute:

    // Get browser language preference from server emitted meta tag.
    // Should be set by server with cookie to allow language override and persistence.
    var browserLanguage = $("\html").attr("lang");
    if (!browserLanguage)
        browserLanguage = "en-US";  // Use default when not specified

All you have to do in the future is update the jQuery UI package or add your own translations (which will work with the same routine). The HTML "lang" attribute will also help with Search Engine Optimization (assuming your content is actually localized not just the date picker).

回答3:

you need to do like this:

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

来源：https://stackoverflow.com/questions/10137392/datepicker-is-always-displayed-in-simplified-chinese

标签

jquery

internationalization

datepicker