Jquery datepicker + locale

Version imprimable

Bonjour à tous,

J'ai un petit soucis d'intégration des locales dans mon datepicker.

Je consulte l'exemple fourni dans la doc:

Code:

1
2
3
4
5
6
7
8
9
10
 
  <script>
  $( function() {
    $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
    $( "#locale" ).on( "change", function() {
      $( "#datepicker" ).datepicker( "option",
        $.datepicker.regional[ $( this ).val() ] );
    });
  } );
  </script>

Ce qui m'intéresse dans l'exemple c'est uniquement cette partie pour l'intégration :

Code:

1
2
 
$.datepicker.regional[ "fr" ]

Mais où dois-je place le bout de code dans mon datepicker ici ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
$( function() {
  	var dateFormat = "dd/mm/yy",
      from = $( "#from" )
        .datepicker({
 
	  firstDay: 1,	
          dateFormat : "dd/mm/yy",
          changeMonth: true,
          numberOfMonths: 1,
 
	  beforeShowDay: function(date) {
            var events = [true,''];
            var m = date.getMonth();
			var d = date.getDate();
			var y = date.getFullYear();
			var currentdate = y + '-' + (m+1) + '-' + d ;
 
 				if (currentdate.indexOf(currentdate)  > -1) 
				{
	                events = [true,'background'];
				}
		      return events;
        }
 
 
 
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
		firstDay: 1,  
 
		dateFormat : "dd/mm/yy",
        changeMonth: true,
        numberOfMonths: 1,
		beforeShowDay: function(date) {
            var events = [true,''];
            var m = date.getMonth();
			var d = date.getDate();
			var y = date.getFullYear();
			var currentdate = y + '-' + (m+1) + '-' + d ;
 
 
			if (currentdate.indexOf(currentdate)  > -1) 
				{
	                events = [true,'background'];
				}
 
 
 
 
            return events;
        }
 
 
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });
 
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
 
      return date;
    }
  } );
  </script>

Merci pour votre aide ;)

22/02/2019, 16h50
legrandse
Une petite aide svp ;)

Je ne sais pas comment faire pour intégrer un paramètre langue dans le datepicker sur un site multi-langue.

il n'y a pas de paramètre style:
Code:

1 2 regional: "fr",
mais ceci:
Code:

1 2 $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
sauf que je ne vois pas comment l'adapter à mon code déjà existant.

Merci merci

Et si tu construis toi même datepicker.regional["fr"] ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 $.datepicker.regional['fr'] = {
       dateFormat: 'dd-mm-yy',
       closeText: 'Fermer',
       prevText: 'Précédent',
       nextText: 'Suivant;',
       currentText: 'Aujourd\'hui',
       monthNames: ['Janvier','Fevrier','Mars','Avril','Mai','Juin',
             'Juillet','Aout','Septembre','Octobre','Novembre','Decembre'],
       monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jun',
             'Jul','Aou','Sep','Oct','Nov','Dec'],
       dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
       dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
       dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
       weekHeader: 'Sm',
       firstDay: 1,
       isRTL: false,
       showMonthAfterYear: false,
       yearSuffix: '',
       minDate: 0,
       maxDate: '+12M +0D',
       numberOfMonths: 2,
       showButtonPanel: true
};
    $.datepicker.setDefaults($.datepicker.regional['fr']);
    $('#datepicker').datepicker();

Hello,

Merci pour ton aide.

Désolé mais j'ai oublié de copier un détail pour les explications:
Dans le head j'ai les fichiers de traduction comme ceci:

Code:

1
2
3
4
5
 
<script src="js/datepicker/i18n/datepicker-en.js"></script>
<script src="js/datepicker/i18n/datepicker-fr.js"></script>
<script src="js/datepicker/i18n/datepicker-nl.js"></script>
<script src="js/datepicker/i18n/datepicker-de.js"></script>

ces fichiers se présentent comme suit (en FR):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au),
			  Stéphane Nahmani (sholby@sholby.net),
			  Stéphane Raimbault <stephane.raimbault@gmail.com> */
( function( factory ) {
	if ( typeof define === "function" && define.amd ) {
 
		// AMD. Register as an anonymous module.
		define( [ "../widgets/datepicker" ], factory );
	} else {
 
		// Browser globals
		factory( jQuery.datepicker );
	}
}( function( datepicker ) {
 
datepicker.regional.fr = {
	closeText: "Fermer",
	prevText: "Précédent",
	nextText: "Suivant",
	currentText: "Aujourd'hui",
	monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin",
		"juillet", "août", "septembre", "octobre", "novembre", "décembre" ],
	monthNamesShort: [ "janv.", "févr.", "mars", "avr.", "mai", "juin",
		"juil.", "août", "sept.", "oct.", "nov.", "déc." ],
	dayNames: [ "dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi" ],
	dayNamesShort: [ "dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam." ],
	dayNamesMin: [ "D","L","M","M","J","V","S" ],
	weekHeader: "Sem.",
	dateFormat: "dd/mm/yy",
	firstDay: 1,
	isRTL: false,
	showMonthAfterYear: false,
	yearSuffix: "" };
datepicker.setDefaults( datepicker.regional.fr );
 
return datepicker.regional.fr;
 
} ) );

et je comptais modifier le choix de langue par récupération GET:

Code:

1
2
 
$.datepicker.regional[ "fr" ] //a la place de "fr" j'aurais une variable php

Le tout c'est de pouvoir intégrer la ligne en question dans le datepicker.

25/02/2019, 16h12
legrandse
Il doit y avoir un problème technique sur le forum car je vois ta réponse par email mais elle ne figure pas ici.

Pour y répondre, je comptais faire comme ceci:

récup GET en php:
Code:

1 2 $lang = $_GET['lang'];
intégration dans le javascript:
Code:

1 2 $.datepicker.regional[ <?php echo $lang ?> ]

Salut,

Si tu veux modifier la langue du datepicker selon la valeur de ta variable php, il te faut d'abord récupérer la valeur de la variable php, puis la stocker dans une variable js.

Pour ça il faut ajouter par exemple un <a> avec l'attribut href qui redirige vers ta page php <a href="chemin_vers_ta_page?langue_=en">Anglais</a>
Après tu récupères cette variable "langue" avec $_GET (si elle existe) et tu la stocke dans ta variable js.
Code:

1 2 3 4 5 6 7 8 9 10 <script> /* si $_GET existe alors on prend sa valeur, sinon on met la langue "fr" par défaut */ var langue="<?php echo isset($_GET['langue_'])?$_GET['langue_']:'fr';?>"; console.log('langue est :'+langue); $(document).ready(function(){ $.datepicker.setDefaults($.datepicker.regional[langue]); $('#datepicker').datepicker(); }); </script>
ou bien, tu mets directement le php dans regional
Code:

1 2 $.datepicker.setDefaults($.datepicker.regional["<?php echo isset($_GET["langue_"])?$_GET['langue_']:"fr";?>"]);
Pour tester ça essaie de mettre manuellement "?langue_=en" par exemple à la fin de l'url chemin_vers_ta_page?langue_=en.

Edit : non il n y a pas de problème technique sur le forum, j'ai supprimé mon message par erreur, désolé.

25/02/2019, 16h41
legrandse

Cà marche merci pour ton aide.

Il y a juste un détail qui a son importance c'est que j'utilise un datepicker avec un check-in et un check-out.

La langue se modifie sur le datepicker check-in mais pas sur celui du check-out.

Les id des input sont "from" et "to"

Comment peut-on modifier cela ?
25/02/2019, 16h45
Toufik83

Il faut voir le code html/jquery nécessaires pour mieux comprendre le problème.

Voici le code de mon datepicker:
le html:

Code:

1
2
<input type="text" class="form-control input-lg" id="from" name="arrival" autocomplete="off" required="required" />
<input type="text" class="form-control input-lg" id="to" name="departure" autocomplete="off" required="required"/>

et le javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
$( function() {
  	var dateFormat = "dd/mm/yy",
      from = $( "#from" )
        .datepicker({
 
	  firstDay: 1,	
          dateFormat : "dd/mm/yy",
          changeMonth: true,
          numberOfMonths: 1,
 
	  beforeShowDay: function(date) {
            var events = [true,''];
            var m = date.getMonth();
			var d = date.getDate();
			var y = date.getFullYear();
			var currentdate = y + '-' + (m+1) + '-' + d ;
 
 				if (currentdate.indexOf(currentdate)  > -1) 
				{
	                events = [true,'background'];
				}
		      return events;
        }
 
 
 
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
		firstDay: 1,  
 
		dateFormat : "dd/mm/yy",
        changeMonth: true,
        numberOfMonths: 1,
		beforeShowDay: function(date) {
            var events = [true,''];
            var m = date.getMonth();
			var d = date.getDate();
			var y = date.getFullYear();
			var currentdate = y + '-' + (m+1) + '-' + d ;
 
 
			if (currentdate.indexOf(currentdate)  > -1) 
				{
	                events = [true,'background'];
				}
 
 
 
 
            return events;
        }
 
 
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });
 
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
 
      return date;
    }
  } );
  </script>
 
 
<script>
/* si $_GET existe alors on prend sa valeur, sinon on met la langue "fr" par défaut */
var langue="<?php echo isset($_GET['langue_'])?$_GET['langue_']:'fr';?>";
console.log('langue est :'+langue);
$(document).ready(function(){
    $.datepicker.setDefaults($.datepicker.regional[langue]);
    $('#from').datepicker();
 
});
 
</script>

J'ai essayé en ajoutant les mêmes lignes que pour le from comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
<script>
/* si $_GET existe alors on prend sa valeur, sinon on met la langue "fr" par défaut */
var langue="<?php echo isset($_GET['langue_'])?$_GET['langue_']:'fr';?>";
console.log('langue est :'+langue);
$(document).ready(function(){
    $.datepicker.setDefaults($.datepicker.regional[langue]);
    $('#to').datepicker();
    
});

</script>

sans succès.

tu peux grouper les deux inputs dans un seul sélecteur jQuery et dans un seul script

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script>
$(function(){
  var dateFormat = "dd/mm/yy",langue="<?php echo isset($_GET['langue_'])?$_GET['langue_']:'fr';?>",
      from = $( "#from" ).datepicker({...}),
      to=$("#to").datepicker({....});
      function getDate( element ) {
        ....
      }
      console.log('langue est :'+langue); 
     $.datepicker.setDefaults($.datepicker.regional[langue]);
     $('#from,#to').datepicker();
});
</script>

26/02/2019, 09h08
legrandse

Fonctionne nickel.

Un grand merci à toi ;)