Gestion multiple de plage de jour avec les datepicker

Version imprimable

4 pièce(s) jointe(s)

Bonjour,

J'ai créer un datepicker pour pouvoir l'utiliser afin de faire des plages de date, donc pour ça je l'appel 2 fois avec la class ".datepicker" que j'ai créer et des id différent "dated" et "datef".

Voici un exemple :
Code:

1 2 Du <INPUT type=text class=datepicker name=dated id=dated> Au <INPUT type=text class=datepicker name=dated2 id=dated2>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 $( ".datepicker" ).datepicker({ showOn: "button", buttonText: "Selectionner une date", buttonImage: "/weliteimages/calendrier.gif", buttonImageOnly: true, changeMonth: true, changeYear: true, showWeek: true }); $( ".ui-datepicker" ).css("font-size", "10px"); /* Permet d'eviter de mettre n'importe quel date */ $("#dated").datepicker('option','onSelect',function() { $("#datef").datepicker('option','minDate', new Date($(this).datepicker('getDate').getTime()+86400000) ); }); $("#datef").datepicker('option','onSelect',function() { $("#dated").datepicker('option','maxDate', new Date($(this).datepicker('getDate').getTime()-86400000) ); });
Voilà en gros le résultat donne ça :
Pièce jointe 146420Pièce jointe 146421

En gros cela permet d'éviter de mettre n'importe quel date pour la plage de date.

Cependant quand je souhaite faire une deuxième plage sur la même page il me suffit simplement de dupliquer le code avec les nouveaux id. Mais dupliquer j'aime pas et ce que je souhaite faire c'est ça :
Code:

1 2 3 4 5 6 7 8 9 10 $("#dated, #dated2, #dated3").datepicker('option','onSelect',function() { $("#datef, #datef2, #datef3").datepicker('option','minDate', new Date($(this).datepicker('getDate').getTime()+86400000) ); }); $("#datef, #datef2, #datef3").datepicker('option','onSelect',function() { $("#dated, #dated2, #dated3").datepicker('option','maxDate', new Date($(this).datepicker('getDate').getTime()-86400000) ); });
Mais sa ne marche pas, enfin pas correctement. En gros la contrainte n'arrive pas à clairement différencier les 3 plages (dated/datef, dated2/datef2 et dated3/datef3) sans les mélanger.

Pièce jointe 146422Pièce jointe 146424

Donc comme on peut le voir le premier datepicker de la deuxième plage à la contrainte du deuxième datepicker de la première plage. :?

Je suppose que sa doit être tout bêtement par rapport au sélecteur css mais je vois pas comment,

Si vous avez une idée je suis preneur ;)

Bonsoir

Exemple :

Code:

1
2
3
4
5
6
7
8
9
<div>
	Du <input type="text" class="datepicker" id="dated10"> &nbsp; Au <input type="text" class="datepicker" id="datef10">
</div>
<div>
	Du <input type="text" class="datepicker" id="dated20"> &nbsp; Au <input type="text" class="datepicker" id="datef20">
</div>
<div>
	Du <input type="text" class="datepicker" id="dated30"> &nbsp; Au <input type="text" class="datepicker" id="datef30">
</div>

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
	$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
	$( ".datepicker" ).datepicker({
		"showOn" : "button",
		"buttonImage" : "http://danielhagnoul.developpez.com/images/calendar.gif",
		"buttonImageOnly" : true,
        "showWeeks" : true,
        "changeMonth" : true,
        "changeYear" : true,
        "showButtonPanel" : true,
        "minDate" : "-0j",
        "onSelect" : function( dateStr, ObjPicker ){
        	// this est l'input
        	// debug
            // console.log( this.id, " : ", dateStr );
        }
	});
 
	$( "[id^='dated']" ).datepicker( 'option', 'onSelect', function(){
		// debug
		// console.log( "onSelect", this.id );
 
		$( "#datef" + this.id.slice( -2 ) ).datepicker( 'option', 'minDate', new Date( $( this ).datepicker( 'getDate' ).getTime() + 86400000 ) );
	});
 
	$( "[id^='datef']" ).datepicker( 'option', 'onSelect', function(){
		// debug
		// console.log( "onSelect", this.id );
 
		$( "#dated" + this.id.slice( -2 ) ).datepicker( 'option', 'maxDate', new Date( $( this ).datepicker( 'getDate' ).getTime() - 86400000 ) );
	});

22/05/2014, 09h31
Nico1131

Génial, merci ça marche niquel :D

J'en apprend tout les jours avec jQuery :mrgreen:

Donc en gros si je comprends bien le fonctionnement :

Code:

$( "[id^='dated']" )

Et

Code:

$( "#datef" + this.id.slice( -1 ) )

Permet d'appliquer la contrainte sur tout les id qui commence par "dated" et "datef".
J'ai du mettre le slice à -1 car mes id dans le programme commençaient par 1,2,3....

Par contre le slice ne marchera plus correctement si mes id continu dans les dizaines non ? :?
22/05/2014, 11h25
danielhagnoul

Citation:

Envoyé par Nico1131

Code:

$( "[id^='dated']" )

Et

Code:

$( "#datef" + this.id.slice( -1 ) )

Permet d'appliquer la contrainte sur tout les id qui commence par "dated" et "datef".

Oui pour dated ! Mais "#datef" + this.id.slice( -1 ) est uniquement le datefXY qui correspond au datedXY.

Citation:

Envoyé par Nico1131

Par contre le slice ne marchera plus correctement si mes id continu dans les dizaines non ?

Oui ! C'est la raison pour laquelle il faut numéroter de 10 à 99.
22/05/2014, 11h36
Nico1131

Ok, merci pour toutes tes explications :D

Je vais suivre ton conseil.

Du coup je pense que mon sujet est résolu, donc je vais le clore ;)