Jquery datepicker + locale

**legrandse** · 22/02/2019, 12h34

Bonjour à tous,

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

Je consulte l'exemple fourni dans la doc:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**legrandse** · 22/02/2019, 16h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
regional: "fr",

mais ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );

sauf que je ne vois pas comment l'adapter à mon code déjà existant.

Merci merci

**Toufik83** · 22/02/2019, 18h22

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

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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();

**legrandse** · 25/02/2019, 13h46

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**legrandse** · 25/02/2019, 16h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$lang = $_GET['lang'];

intégration dans le javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Toufik83** · 25/02/2019, 16h21

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

**legrandse** · 25/02/2019, 16h41

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 ?

**Toufik83** · 25/02/2019, 16h45

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

**legrandse** · 25/02/2019, 16h53

Voici le code de mon datepicker:
le html:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Toufik83** · 25/02/2019, 17h23

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

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**legrandse** · 26/02/2019, 09h08

Fonctionne nickel.

Un grand merci à toi

Jquery datepicker + locale

jQuery

Discussions similaires

Partager

Partager