Discussion :

[pc75]

Bonjour,

J'ai deux zones de saisie : txtDebut et txtFin en readonly.
Pour chacune de ces deux zones, j'ai un gif qui permet d'ouvrir un calendrier dans une pop up afin de choisir une date.

J'ai besoin d'ouvrir une autre pop up quand les zones txtDebut et txtFin sont renseignées.

J'ai fait quelquechose comme ça, mais ma fonction n'est pas appelée

Code :

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

1
2
3
4
 
...
<input type="text" onchange="Suite()" name="txtFin" size="10" maxlength="10" readonly>
...

Et ma fonction

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function Suite()
	{
	var Deb = document.frmSaisie.txtDebut.value;
	var Fin = document.frmSaisie.txtFin.value;
	if (Deb != '' && Fin != '')
		{
		window.open..........
		}
	}

Je ne vois pas quel autre évenement utiliser.

Quelqu'un aurait une idée ?

Merci

[le_chomeur]

Salut ,

sur ta méthode calendrier , tu utilises , l'id ou le nom du champs à remplir ?

Dans ce cas la utilise 2 booléens ,

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
 
var champs1 = false;
var champs2 = false;
function remplirChamps(lechamps)
	{
        //Ta méthode remplissant la date
...
// et la tu effectues ton test :
if(lechamps == "Deb " && lechamps.value != ""){champs1 = true}
if(lechamps == "Fin " && lechamps.value != ""){champs = true}
 
	if (champs1 && champs2)
		{
		window.open..........
		}
	}
}

[pc75]

Re,

Merci de t'intéresser à mon souci.

Je suis nul de chez nul en javascript. J'ai récupéré le code du calendrier sur le net, mais je n'y pige pas grand chose.

Je donne un peu plus de code :

Chapeau bas si tu arrives à me sortir de là.

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
 
<script language="javascript">
function Decompte()
	{
	//alert("Decompte");
	var Deb = document.frmSaisie.txtDebut.value;
	var Fin = document.frmSaisie.txtFin.value;
	if (Deb != '' && Fin != '')
		{
		window.open("../Routines/Decompte.asp?Deb=" + Deb + "&Fin=" + Fin, "fenetre2","scrollbars=yes,resizable=yes,width=900,height=400,left=50,top=100");
		}
	}
</script>
 
...
<script language="JavaScript" src="ts_picker.js">
....
					<input type="text" onchange="Suite()"  name="txtFin" size="10" maxlength="10" readonly>
					<a href="javascript:show_calendar('document.frmSaisie.txtFin', document.frmSaisie.txtFin.value);">
					<img src="../images/cal.gif" width="16" height="20" border="0" alt="Cliquez pour le calendrier">
					</a>
.....

Et mon fichier js :

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
 
function show_calendar(str_target, str_datetime) {
	var arr_months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
		"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
	var week_days = ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"];
	var n_weekstart = 1; // day week starts from (normally 0 or 1)
 
// Si la date est invalide : Initialisation avec la date du jour
var test_date = /^(\d+)\/(\d+)\/(\d+)$/;
if (!test_date.exec(str_datetime))
{
var d = new Date();
 
//*******************************************
//if (d.getDate() < 10)
//	{
//	var Jour = "0" + d.getDate();
//	}
//alert(Jour);
//var str_datetime = Jour + "/" + (d.getMonth() + 1) + "/" + d.getYear();
var str_datetime = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getYear();
//*******************************************
}
 
	var dt_datetime = (str_datetime == null || str_datetime =="" ?  new Date() : str2dt(str_datetime));
 
	var dt_prev_month = new Date(dt_datetime);
	dt_prev_month.setMonth(dt_datetime.getMonth()-1);
	var dt_next_month = new Date(dt_datetime);
	dt_next_month.setMonth(dt_datetime.getMonth()+1);
 
	var dt_prev_year = new Date(dt_datetime);
	dt_prev_year.setFullYear(dt_datetime.getFullYear()-1);
	var dt_next_year = new Date(dt_datetime);
	dt_next_year.setFullYear(dt_datetime.getFullYear()+1);
 
	var dt_firstday = new Date(dt_datetime);
	dt_firstday.setDate(1);
	dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
	var dt_lastday = new Date(dt_next_month);
	dt_lastday.setDate(0);
 
	// html generation (feel free to tune it for your particular application)
	// print calendar header
	var str_buffer = new String (
		"<html>\n"+
		"<head>\n"+
		"	<title>Calendrier</title>\n"+
		"</head>\n"+
		"<body bgcolor=\"White\">\n"+
		"<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
		"<tr><td bgcolor=\"#4682B4\">\n"+
		"<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
 
// Ligne Année précédente / suivante
		"<tr>\n	<td bgcolor=\"blue\"><a href=\"javascript:window.opener.show_calendar('"+
		str_target+"', '"+ dt2dtstr(dt_prev_year)+"');\">"+
		"<img src=\"http://images/prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
		" alt=\"Année précédente\"></a></td>\n"+
		"	<td align=\"center\" bgcolor=\"blue\" colspan=\"5\">"+
		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
		+" "+dt_datetime.getFullYear()+"</font></td>\n"+
		"	<td bgcolor=\"blue\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
		+str_target+"', '"+dt2dtstr(dt_next_year)+"');\">"+
		"<img src=\"http://images/next.gif\" width=\"16\" height=\"16\" border=\"0\""+
 
		" alt=\"Année suivante\"></a></td>\n</tr>\n"+
 
// Ligne Mois précédent / suivant
		"<tr>\n	<td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
		str_target+"', '"+ dt2dtstr(dt_prev_month)+"');\">"+
		"<img src=\"http://images/prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
		" alt=\"Mois précédent\"></a></td>\n"+
		"	<td align=\"center\" bgcolor=\"#4682B4\" colspan=\"5\">"+
		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
		+arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+
		"	<td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
		+str_target+"', '"+dt2dtstr(dt_next_month)+"');\">"+
		"<img src=\"http://images/next.gif\" width=\"16\" height=\"16\" border=\"0\""+
		" alt=\"Mois suivant\"></a></td>\n</tr>\n"
 
	);
 
	var dt_current_day = new Date(dt_firstday);
 
	// print weekdays titles
	str_buffer += "<tr>\n";
	for (var n=0; n<7; n++)
		str_buffer += "	<td bgcolor=\"#87CEFA\">"+
		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
		week_days[(n_weekstart+n)%7]+"</font></td>\n";
	// print calendar table
	str_buffer += "</tr>\n";
	while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
		dt_current_day.getMonth() == dt_firstday.getMonth()) {
		// print row heder
		str_buffer += "<tr>\n";
		for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
				if (dt_current_day.getDate() == dt_datetime.getDate() &&
					dt_current_day.getMonth() == dt_datetime.getMonth())
					// print current date
					str_buffer += "	<td bgcolor=\"#FFB6C1\" align=\"right\">";
				else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
					// weekend days
					str_buffer += "	<td bgcolor=\"#DBEAF5\" align=\"right\">";
				else
					// print working days of current month
					str_buffer += "	<td bgcolor=\"white\" align=\"right\">";
 
				if (dt_current_day.getMonth() == dt_datetime.getMonth())
					// print days of current month
					str_buffer += "<a href=\"javascript:window.opener."+str_target+
 
//					".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
					".value='"+dt2dtstr(dt_current_day)+"'; window.close();\">"+
 
					"<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";
				else 
					// print days of other months
 
 
					//str_buffer += "<a href=\"javascript:window.opener."+str_target+
					//".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
					str_buffer += "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
				str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
 
//					str_buffer += "<a href=\"javascript:window.opener."+str_target+
//					".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
//					"<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
//				str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
				dt_current_day.setDate(dt_current_day.getDate()+1);
		}
		// print row footer
		str_buffer += "</tr>\n";
	}
	// print calendar footer
	str_buffer +=
//		"<form name=\"cal\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+
//		"<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+
//		"Heure : <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+
//		"\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" +
//		"</table>\n" +
		"</tr>\n</td>\n</table>\n" +
		"</body>\n" +
		"</html>\n";
 
	var vWinCal = window.open("", "Calendar", 
		"width=200,height=235,status=no,resizable=no,top=200,left=200,toolbar=no,location=no,directories=no,menubar=no");
 
	vWinCal.opener = self;
	var calc_doc = vWinCal.document;
	calc_doc.write (str_buffer);
	calc_doc.close();
}
// datetime parsing and formatting routimes. modify them if you wish other datetime format
function str2dt (str_datetime) {
	var re_date = /^(\d+)\/(\d+)\/(\d+)$/;
	if (!re_date.exec(str_datetime))
		return alert("Invalid Datetime format: "+ str_datetime);
	return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6));
}
function dt2dtstr (dt_datetime) {
// Formatage du jour si > 10
if (dt_datetime.getDate() < 10)
	{
	var Jour = "0" + dt_datetime.getDate();
	}
else
	{
	var Jour = dt_datetime.getDate();
	}
 
// Formatage du mois si > 10
if ((dt_datetime.getMonth()+1) < 10)
	{
	var Mois = "0" + (dt_datetime.getMonth()+1);
	}
else
	{
	var Mois = (dt_datetime.getMonth()+1);
	}
 
	return (new String (
			Jour+"/"+Mois+"/"+dt_datetime.getFullYear()));
 
//	return (new String (
//			dt_datetime.getDate()+"/"+(dt_datetime.getMonth()+1)+"/"+dt_datetime.getFullYear()));
 
}
function dt2tmstr (dt_datetime) {
//return;
	return (new String (
			dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds()));
}

[le_chomeur]

essaye de mettre l'algo que je t'ai envoyé juste avant :
calc_doc.close(); de ton js

Mais pourquoi utiliser une popup ?

regarde ici :
http://www.developpez.net/forums/sho...d.php?t=443310
très simple a mettre en place...
et tu pourras mettre ce que je t'ai expliqué en place plus facilement ...

[pc75]

Re,

La dernière solution que tu me proposes me parait sympa. Plus de problème avec la pop up.

Par contre, je ne vois pas où ni comment utiliser cet algo.

PS : J'ai honte quelquefois.

Merci encore

[le_chomeur]

Alors en examinant la source tu aurais pu trouver allez :

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
 
var champs1 = false;
var champs2 = false;
 
//Fonction permettant d'alimenter le champs
function alimenterChamps(daySelect){
		if(daySelect != ''){
			lastInput.value= formatInfZero(daySelect) + formatage + formatInfZero((current_month+1)) + formatage +current_year;
		}
		else{
			lastInput.value = '';
		}
 
// et la tu effectues ton test :
if(lastInput == "Deb " && lastInput.value != ""){champs1 = true}
if(lastInput== "Fin " && lastInput.value != ""){champs = true}
 
	if (champs1 && champs2)
		{
		tu fais ton cacul :)
		}
	}
}
 
		masquerCalendrier();
}

voila