Best IT Recipes

JQuery Localizing Datepicker

I need a french calendar and I can not understand the problem. I guess I'm not using regional options, as it should be. But...

Here is my code:

$(function() { $('#Date').datepicker({ showMonthAfterYear: false, showOn: 'both', buttonImage: 'media/img/calendar.png', buttonImageOnly: true, dateFormat:'d MM, y' }, $.datepicker.regional['fr'] ); });
+62
javascript jquery-ui jquery-ui-datepicker internationalization localization
Sep 21 '09 at 2:52
source share
6 answers

You can do it as follows:

  $.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']);
+38
Apr 23 '12 at 7:32
source share

This code should work, but you need to enable localization on your page (it is not enabled by default). Try putting this in your <head> , somewhere after including jQuery and jQueryUI:

 <script type="text/javascript" src="https://raw.githubusercontent.com/jquery/jquery-ui/master/ui/i18n/datepicker-fr.js"> </script>

I cannot find where this is documented on the jQueryUI site, but if you look at the source of this demo , you will see that they do it. In addition, please note that, including this JS file, the datepicker will set the default value to French, so if you want only certain date pickers to be in French, you need to set the default value to English.

You can find all languages ​​here on github: https://github.com/jquery/jquery-ui/tree/master/ui/i18n

+68
Sep 21 '09 at 3:07
source share

If you want to include some parameters besides regional localization, you need to use $ .extend, for example:

 $(function() { $('#Date').datepicker($.extend({ showMonthAfterYear: false, dateFormat:'d MM, y' }, $.datepicker.regional['fr'] )); });
+6
Jun 01 '13 at 18:12
source share

You should expand the regional options like this (split the code into several lines for readability):

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

The order of the parameters is important due to the jQuery.extend method. Two wrong examples:

 /* * 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"]);

PS: you also need to download jQuery UI i18n files:

 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"> </script>
+4
Dec 28 '14 at 9:25
source share

If you are looking for datepicker in spanish (datepicker en español)

 <script type="text/javascript"> $.datepicker.regional['es'] = { monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'], monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'], dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'], dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'], dayNamesMin: ['Do', 'Lu', 'Ma', 'Mc', 'Ju', 'Vi', 'Sa'] } $.datepicker.setDefaults($.datepicker.regional['es']); </script>
+3
Jan 12 '16 at 19:17
source share

Datepicker in German (Deutsch):

 $.datepicker.regional['de'] = { monthNames: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November','Dezember'], monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'], dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'], dayNamesShort: ['Son','Mon','Die','Mit','Don','Fre','Sam'], dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'], firstDay: 1}; $.datepicker.setDefaults($.datepicker.regional['de']);
0
Aug 11 '17 at 14:05
source share


More articles:


All Articles