Discussion :

[Nico1131]

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

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

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

Code javascript :

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
$( ".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 :


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

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

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.



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

[danielhagnoul]

Bonsoir

Exemple :

Code HTML :

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

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

[Nico1131]

Génial, merci ça marche niquel

J'en apprend tout les jours avec jQuery

Donc en gros si je comprends bien le fonctionnement :

Code javascript :

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

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

Et

Code javascript :

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

$( "#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 ?

[danielhagnoul]

Code javascript :

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

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

Et

Code javascript :

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

$( "#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.

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.

[Nico1131]

Ok, merci pour toutes tes explications

Je vais suivre ton conseil.

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