Comment localiser le datpicker de l'interface utilisateur jQuery?

Question

J'ai vraiment besoin d'un calendrier déroulant localisé. Un calendrier anglais ne semble cependant que ne pas communiquer pas exactement l'excellence sur un site norvégien ;-)

Je l'ai expérimenté avec le jQuery DatePicker, leur site dit qu'il peut être localisé, au travail. J'utilise ASPNET.MVC, et je veux vraiment coller à une bibliothèque javascript. Dans ce cas jQuery.

Le calendrier ajax toolkit serait acceptable, si seulement il afficherait aussi des noms norvégiens.

Mise à jour: Génial! Je vois que je suis absent les fichiers de langue, un pas petit détail :-)

Answer 1

je me suis dit la démo et implémenté de la manière suivante:

$.datepicker.setDefaults(
    $.extend(
    {'dateFormat':'dd-mm-yy'}, 
    $.datepicker.regional['nl'] 
) 
); 

I nécessaire pour définir la valeur par défaut pour la dateformat trop ...

Answer 2

pour ceux qui ont encore des problèmes, vous devez télécharger le fichier langue de votre besoin d'ici:

https://github.com/jquery/jquery-ui/tree/master/ui/i18n

puis l'inclure dans votre page comme celle par exemple (en langue italienne):

<script type="text/javascript" src="/scripts/jquery.ui.datepicker-it.js"></script> 

puis utilisez zilverdistel's code: D

Answer 3

1. Vous devez charger les fichiers i18n jQuery UI :

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"> 
</script> 

2. Utilisez $.datepicker.setDefaults fonction pour définir les valeurs par défaut pour TOUS les datpickers.

3. Si vous souhaitez remplacer le réglage (s) avant de valeurs par défaut, vous pouvez utiliser ceci:

var options = $.extend(
    {},         // empty object 
    $.datepicker.regional["fr"],   // fr regional 
    { dateFormat: "d MM, y" /*, ... */ } // your custom options 
); 
$.datepicker.setDefaults(options); 

L'ordre des paramètres est important en raison de la façon dont jQuery.extend œuvres. Deux exemples incorrects:

/* 
* This overwrites the global variable itself instead of creating a 
* customized copy of french regional settings 
*/ 
$.extend($.datepicker.regional["fr"], { dateFormat: "d MM, y"}); 

/* 
* The desired dateFormat is overwritten by french regional 
* settings' date format 
*/ 
$.extend({ dateFormat: "d MM, y"}, $.datepicker.regional["fr"]); 

Answer 4

La chaîne $.datepicker.regional['it'] pas traduire tous les mots.

Pour traduire le datepicker vous devez spécifier certaines variables:

$.datepicker.regional['it'] = { 
    closeText: 'Chiudi', // set a close button text 
    currentText: 'Oggi', // set today text 
    monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno', 'Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'], // set month names 
    monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'], // set short month names 
    dayNames: ['Domenica','Luned&#236','Marted&#236','Mercoled&#236','Gioved&#236','Venerd&#236','Sabato'], // set days names 
    dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'], // set short day names 
    dayNamesMin: ['Do','Lu','Ma','Me','Gio','Ve','Sa'], // set more short days names 
    dateFormat: 'dd/mm/yy' // set format date 
}; 

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

$(".datepicker").datepicker(); 

Dans ce cas, votre datepicker est correctement traduit.

Answer 5

Voici un exemple de localisation possible sans bibliothèque supplémentaire.

jQuery(function($) { 
 
    $('input.datetimepicker').datepicker({ 
 
    duration: '', 
 
    changeMonth: false, 
 
    changeYear: false, 
 
    yearRange: '2010:2020', 
 
    showTime: false, 
 
    time24h: true 
 
    }); 
 

 
    $.datepicker.regional['cs'] = { 
 
    closeText: 'Zavřít', 
 
    prevText: '<Dříve', 
 
    nextText: 'Později>', 
 
    currentText: 'Nyní', 
 
    monthNames: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen', 
 
     'září', 'říjen', 'listopad', 'prosinec' 
 
    ], 
 
    monthNamesShort: ['led', 'úno', 'bře', 'dub', 'kvě', 'čer', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'], 
 
    dayNames: ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'], 
 
    dayNamesShort: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'], 
 
    dayNamesMin: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'], 
 
    weekHeader: 'Týd', 
 
    dateFormat: 'dd/mm/yy', 
 
    firstDay: 1, 
 
    isRTL: false, 
 
    showMonthAfterYear: false, 
 
    yearSuffix: '' 
 
    }; 
 

 
    $.datepicker.setDefaults($.datepicker.regional['cs']); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> 
 
    <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
 
    <script src="datepicker-cs.js"></script> 
 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     console.log("test"); 
 
     $("#test").datepicker({ 
 
     dateFormat: "dd.m.yy", 
 
     minDate: 0, 
 
     showOtherMonths: true, 
 
     firstDay: 1 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <h1>Here is your datepicker</h1> 
 
    <input id="test" type="text" /> 
 
</body> 
 
</html>

Answer 6

$.datepicker.setDefaults({ 
    closeText: "关闭", 
    prevText: "<上月", 
    nextText: "下月>", 
    currentText: "今天", 
    monthNames: [ "一月","二月","三月","四月","五月","六月", 
    "七月","八月","九月","十月","十一月","十二月" ], 
    monthNamesShort: [ "一月","二月","三月","四月","五月","六月", 
    "七月","八月","九月","十月","十一月","十二月" ], 
    dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ], 
    dayNamesShort: [ "周日","周一","周二","周三","周四","周五","周六" ], 
    dayNamesMin: [ "日","一","二","三","四","五","六" ], 
    weekHeader: "周", 
    dateFormat: "yy-mm-dd", 
    firstDay: 1, 
    isRTL: false, 
    showMonthAfterYear: true, 
    yearSuffix: "年" 
    }); 

le code i18n peut être copié à partir https://github.com/jquery/jquery-ui/tree/master/ui/i18n

Answer 7

au cas où quelqu'un est toujours bloqué à ce sujet, malgré les autres réponses, je résolu ce problème avec:

$.datepicker.setDefaults($.datepicker.regional['en-GB']); 

notez l'e xtra 'GB'. Après ça ça a bien marché.

Answer 8

Si vous utilisez le datepicker et moment.js jQuery UI sur le même projet, vous devez ferroutage hors de données locale de moment.js:

// Finnish. you need to include separate locale file for each locale: https://github.com/moment/moment/tree/develop/locale 
moment.locale('fi'); 

// fetch locale data internal structure, so we can shove it inside jQuery UI 
var momentLocaleData = moment.localeData(); 

$.datepicker.regional['user'] = { 
    monthNames: momentLocaleData._months, 
    monthNamesShort: momentLocaleData._monthsShort, 
    dayNames: momentLocaleData._weekdays, 
    dayNamesShort: momentLocaleData._weekdaysMin, 
    dayNamesMin: momentLocaleData._weekdaysMin, 
    firstDay: momentLocaleData._week.dow, 
    dateFormat: 'yy-mm-dd' // "2016-11-22". date formatting tokens are not easily interchangeable between momentjs and jQuery UI (https://github.com/moment/moment/issues/890) 
}; 

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

Answer 9

Cette solution peut aider.

$(document).ready(function() { 
 
    var userLang = navigator.language || navigator.userLanguage; 
 

 
    var options = $.extend({}, 
 
    $.datepicker.regional["ja"], { 
 
     dateFormat: "yy/mm/dd", 
 
     changeMonth: true, 
 
     changeYear: true, 
 
     highlightWeek: true 
 
    } 
 
); 
 

 
    $("#japaneseCalendar").datepicker(options); 
 
});

#ui-datepicker-div { 
 
    font-size: 14px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" 
 
      href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script> 
 
</head> 
 
<body> 
 
<h3>Japanese JQuery UI Datepicker</h3> 
 
<input type="text" id="japaneseCalendar"/> 
 

 
</body> 
 
</html>