activer/désactiver une liste déroulante + date calendrier

**toome** · 21/12/2005, 16h35

Bonjour,

pour augmenter un peu mes chances, je mets un lien vers un post déjà édité en rubrique HTML...(je pense que sa place est plutot ici)
http://www.developpez.net/forums/viewtopic.php?t=433326

avis aux modérateurs :
si cela bouscule les règles du forum merci de me le signaler

**toome** · 28/12/2005, 14h57

bonjour à tous et à toutes,

je cherche toujours l'astuce de popup calendrier, comme ici en fait : http://www.voyages-sncf.com/

là on peut choisir la date de départ et de retour, très pratique !!

qui a le secret ?

**siddh** · 28/12/2005, 15h15

as tu vraiment cherché dans google ?

**toome** · 02/01/2006, 15h55

Envoyé par siddh

as tu vraiment cherché dans google ?

meilleurs voeux pour tous !

oui effectivement j'ai cherché sur google, et d'ailleurs c'est la première chose que je fais

, j'ai trouvé des réponses mais qui donnent pas satisfaction

je pense que beaucoup de gens rêvent de trouver la reponse !! c'est très pratique pour la saisie des dates de naissance etc, etc.... c'est beaucoup mieux que les trois listes déroulantes (jour, mois, année)...

la meilleur chose que j'ai réussit à faire jusqu'à matnant c'est de prposer un seul champ de saisie libre et vérifier la saisie par des regexp et du javascript

mais ce que je cherche cé bocou mieu.....

pour moi c'est absolument faisable, puisque les autres l'ont fait avec un langage Web, reste à savoir comment

il faut pas capituler devant l'ignorance !!

**pc75** · 02/01/2006, 16h01

Bonjour,

Fais une recherche sur GOGOL avec "date picker"

Sinon, j'ai ça :

Code :

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

1
2
3
 
					<input type="text" name="txtDateTests" value="" readonly size="10">
					<a href="javascript:show_calendar('document.Monfrm.txtDateTests', document.Monfrm.txtDateTests.value);"><img src="../../../images/cal.gif" width="16" height="16" border="0" alt="Cliquez pour le calendrier"></a>

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
 
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();
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+)\s+(\d+)\:(\d+)\:(\d+)$/;
	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) {
	return (new String (
//			dt_datetime.getDate()+"-"+(dt_datetime.getMonth()+1)+"-"+dt_datetime.getFullYear()+" "));
			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()));
}

**toome** · 02/01/2006, 16h49

ben rien à dire !! merci boucoup !! tu nous as maché le boulot !! bravo !!

pour une utilisation parfaite et sans même réfléchir une seconde ou toucher à quoi que ce soit, voici 5 consignes à respecter :

1- remercier pc75
2- ajouter l'entete

Code :

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

<script language="JavaScript" type="text/javascript">

puis copier-coller le grand code et ajouter à sa fin "</script> (pas compliqué j'espere !!)
3- mettre ensuite

Code :

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

1
2
3
4
5
 
[color=red]<form id="Monfrm" name="Monfrm" method="post" action="">[/color]
 <input type="text" name="txtDateTests" value="" readonly size="10">
 <a href="javascript:show_calendar('document.Monfrm.txtDateTests', document.Monfrm.txtDateTests.value);"><img src="../../../images/cal.gif" width="16" height="16" border="0" alt="Cliquez pour le calendrier"></a> 
[color=red]</form>[/color]

4- demander à pc75 les images "next.gif", "prev.gif" et "cal.gif", mettez-les au bon endroit.
5- même s'il vous le refuse, dites-le bonne année et merci !!

Moralité : ceci m'a dépanné une fois, mais comment je ferai pour les autres fois ?! il est tant pour doubler mon effort !!

**toome** · 02/01/2006, 17h25

attendez les mecs et les filles !!

le code ci-dessus a un bug à corriger... sous firefox l'année s'affiche par centaines et pas par milliers !! 2006 est affiché en 106, 2005 en 105...

sous IE pas de probleme...

à mon avis, le bug est lié à l'interprétation que firefox donne à certains scripts de date...

je garde le topic en "résolu" pour l'instant

à suivre...

**siddh** · 02/01/2006, 19h18

j'ai pas regardé le code mais tu doit avoir un getYear a remplacer par getFullYear

**pc75** · 03/01/2006, 08h42

Re,

Envoyé par toome

2- ajouter l'entete

Code :

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

<script language="JavaScript" type="text/javascript">

puis copier-coller le grand code et ajouter à sa fin "</script> (pas compliqué j'espere !!)

On peut faire plus clean en mettant le code dans un fichier :

Code :

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

1
2
 
<script language="JavaScript" src="../../Scripts/dt_picker.js">

Envoyé par toome

4- demander à pc75 les images "next.gif", "prev.gif" et "cal.gif", mettez-les au bon endroit.

Elles sont là :

http://cjoint.com/?bdiPGH1Evo

[/code]

**siddh** · 03/01/2006, 10h17

en fouillant la dedans, tu trouveras des calendriers :
http://www.developpez.net/forums/viewtopic.php?t=222163

**toome** · 03/01/2006, 13h29

merci siddh & pc75 et aussi les autres...
le script marche très bien, sauf là quand j'ai voulu l'intégrer dans une page que j'avais déjà ça plante avec IE mais pas avec FireFox... ce qui me pose proble c'est un include d'une template qui n'as rien d'autre que le graphique, un header et un appel à la feuille de style...
je ne vois pas où ets le problème surtout que ça a marché avec FF....!!

j'ai bien voulu vous montrer la template mais elle n'a rien de spécial !!!

voci le 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
 
<? include "template.php"; ?>
<script language="JavaScript" src="library/calendar.js">
</script>
 
<div class="center_1">
<p>
<a href="javascript:show_calendar('document.Monfrm.txtDateTests', document.Monfrm.txtDateTests.value);"></a> 
</p>
<form id="Monfrm" name="Monfrm" method="post" action="">
  <input type="text" name="txtDateTests" value="" readonly size="10" />
  <a href="javascript:show_calendar('document.Monfrm.txtDateTests', document.Monfrm.txtDateTests.value);">
  <img src="img/Calendar.gif" width="16" height="16" border="0" alt="Cliquez pour le calendrier" /></a>
</form>
</div>
<? include "template_bas.php"; ?>

**toome** · 03/01/2006, 14h55

probleme résolu...

Bonne journée

activer/désactiver une liste déroulante + date calendrier

JavaScript

Discussions similaires

Partager

Partager