Discussion :

[pierrot10]

Bonjour à tous,

J'ai trouvé cette extraordinaire librairie
http://jqueryui.com/demos/datepicker/#event-search

J'utilise ceci pour que l'on puisse sélectionner un date "de" et une autre "à".
Le problème c'est que je dois le faire 16 fois même plus.

Je dois donc écrire ce code

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
 
	$(function() {
		var dates = $('#from_stand, #to_stand').datepicker({
			defaultDate: "+1w",
			showOn: 'button',
			buttonImage: '../img/calendar.jpg',
			buttonImageOnly: true,
			changeMonth: false,
			numberOfMonths: 2,
			onSelect: function(selectedDate) {
				var option = this.id == "from_stand" ? "minDate" : "maxDate";
				var instance = $(this).data("datepicker");
				var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
				dates.not(this).datepicker("option", option, date);
			}
		});
	});

autant de fois que de "de-à" que je souhaite et à chaque foi je dois changer from_stand et to_stand en un nouvelle id qui correcpondra à ma paire suivante.

Voici, ci-dessous, mon code pour 4 champs. Pourriez-vous m'aider à trouver une solution pour merger ceci? N'avoir qu'un $(function(){.... qui gère tous les id?

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
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
 
<script type="text/javascript">
	$(function() {
		var dates = $('#from_stand, #to_stand').datepicker({
			defaultDate: "+1w",
			showOn: 'button',
			buttonImage: '../img/calendar.jpg',
			buttonImageOnly: true,
			changeMonth: false,
			numberOfMonths: 2,
			onSelect: function(selectedDate) {
				var option = this.id == "from_stand" ? "minDate" : "maxDate";
				var instance = $(this).data("datepicker");
				var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
				dates.not(this).datepicker("option", option, date);
			}
		});
	});
 
	$(function() {
		var dates = $('#from_height, #to_height').datepicker({
			defaultDate: "+1w",
			showOn: 'button',
			buttonImage: '../img/calendar.jpg',
			buttonImageOnly: true,
			changeMonth: false,
			numberOfMonths: 2,
			onSelect: function(selectedDate) {
				var option = this.id == "from_height" ? "minDate" : "maxDate";
				var instance = $(this).data("datepicker");
				var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
				dates.not(this).datepicker("option", option, date);
			}
		});
	});
 
	$(function() {
		var dates = $('#from_middle, #to_middle').datepicker({
			defaultDate: "+1w",
			showOn: 'button',
			buttonImage: '../img/calendar.jpg',
			buttonImageOnly: true,
			changeMonth: false,
			numberOfMonths: 2,
			onSelect: function(selectedDate) {
				var option = this.id == "from_middle" ? "minDate" : "maxDate";
				var instance = $(this).data("datepicker");
				var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
				dates.not(this).datepicker("option", option, date);
			}
		});
	});
 
	$(function() {
		var dates = $('#from_low, #to_low').datepicker({
			defaultDate: "+1w",
			showOn: 'button',
			buttonImage: '../img/calendar.jpg',
			buttonImageOnly: true,
			changeMonth: false,
			numberOfMonths: 2,
			onSelect: function(selectedDate) {
				var option = this.id == "from_low" ? "minDate" : "maxDate";
				var instance = $(this).data("datepicker");
				var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
				dates.not(this).datepicker("option", option, date);
			}
		});
	});

J'ai essayé un truc du genre

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
 
	$(function() {
		var dates = $('#from_stand, #to_stand,#from_height,#to_height,#from_middle,#to_middle').datepicker({
			defaultDate: "+1w",
			showOn: 'button',
			buttonImage: '../img/calendar.jpg',
			buttonImageOnly: true,
			changeMonth: false,
			numberOfMonths: 2,
			onSelect: function(selectedDate) {
				var option = this.id == "from_stand" ? "minDate" : "maxDate";
				var instance = $(this).data("datepicker");
				var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
				dates.not(this).datepicker("option", option, date);
			}
		});
	});

Mais sans succès.

Me suis-je bien fait comprendre?
Pouvez vous m'aider?

Merci

[Arnaud F.]

Bonjour,

pour sélectionner vos éléments qui devront contenir des datepicker, vous pouvez tenter de faire ceci :

Code :

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

$("[id ^= from_], [id ^= to_]").datepicker(...);

Ceci retournera tous les éléments dont l'id commence par "from_" et "to_", mais cela peut vous faire sélectionner des éléments non désirés...

Ensuite, dans le code lui_même pour savoir si c'est du from_ ou to_ vous pouvez faire :

Code :

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

var option = (this.id.substring(0, 5) == "from_") ? "minDate" : "maxDate";

Mais le mieux serait de rajouter une classe particulière sur vos éléments dateipcker afin de les sélectionner plus facilement.