Javascript Girl
  1. Javascript Girl
  3. Comment localiser le jpuery UI Datepicker?
Intereting Posts
Javascript: vérifiez si le tableau existe, sinon créez-le JSON Obtenir une requête en utilisant JQuery (cross-domain) Problèmes de préchargement audio en Javascript Lors de la génération de valeurs aléatoires normalement distribuées, quel est le moyen le plus efficace de définir la gamme? Vérifiez le paramètre url en utilisant javascript Comment puis-je créer un script Greasemonkey pour télécharger automatiquement un fichier? Comment se connecter au débogueur Webkit de l'iPhone? JQuery camel-case mapping des noms d'attributs "données-" aux ".data ()" clés D3.js le chemin d'attache de la jauge de remplissage liquide ne fonctionne pas Que fait (1) dans Gmail faire Stubbing et / ou se moquer d'une classe dans sinon.js? Node JS et Webpack Jeton inattendu < Création d'un nouvel onglet / bascule entre onglets dans Firefox? Vérification Javascript si le texte a été sélectionné AngularJS: ng-model qui ne lie pas à ng-checked for checkboxes

Comment localiser le jpuery UI Datepicker?

J'ai vraiment besoin d'un calendrier déroulé localisé. Un calendrier en anglais ne communique pas exactement l'excellence sur un site web norvégien 😉

J'ai expérimenté avec jQuery DatePicker , leur site Web dit qu'il peut être localisé, mais cela ne semble pas fonctionner.

J'utilise ASPNET.MVC, et je souhaite vraiment adhérer à une bibliothèque javascript. Dans ce cas, jQuery.

Le calendrier des outils ajax serait acceptable, si seulement cela afficherait aussi les noms norvégiens.

Mise à jour: incroyable! Je vois que je manque les fichiers de langue, un détail pas si petit 🙂

Pour ceux qui ont encore des problèmes, vous devez télécharger le fichier de langue de votre choix ici:

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

Et incluez-le dans votre page comme ceci par exemple (langue italienne): 

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

Puis utilisez le code de zilverdistel : D

J'ai compris la démo et l'ai mis en œuvre de la manière suivante: 

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

Je devais définir la valeur par défaut pour le format de date aussi …

La chaîne $.datepicker.regional['it'] ne traduit pas 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.

1. Vous devez charger les fichiers jQuery UI i18n: 

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

2. Utilisez la fonction $.datepicker.setDefaults pour définir les valeurs par défaut pour ALL datepickers.

3. Dans le cas où vous souhaitez remplacer les paramètres avant de définir les paramètres par défaut, vous pouvez l'utiliser: 

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

Le code i18n pourrait être copié à partir de https://github.com/jquery/jquery-ui/tree/master/ui/i18n

Voici comment vous pouvez localiser 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: '&#x3c;Dříve', nextText: 'Později&#x3e;', 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>

Au cas où quelqu'un serait TOUJOURS coincé, malgré les autres réponses, j'ai résolu cela avec: 

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

Notez le 'GB' supplémentaire. Ensuite, cela a bien fonctionné.

Si vous utilisez JQuery UI's datepicker et moment.js sur le même projet, vous devriez repérer les données locales 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']);