calendrier javascript avec dates passées grisées

**arnogef** · 27/04/2007, 13h35

Bonjour,
je cherche un script de calendrier (popup qui s'ouvre pour remplir un champ texte) mais dans lequel on ne puisse pas sélectionner une date passée (les dates passées sont grisées).
je n'ai pas trouvé sur ce forum, quelqu'un sait où je pourrais trouver cela?
Merci

**SpaceFrog** · 27/04/2007, 13h45

Premier conseil évites le popup pour un calendrier ...
(a cause des popup blocekrs)

voici le calendrier de micromou retravaillé pour éviter le popup ...

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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Réservation</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" media="screen" type="text/css" title="Essaireservation" href="essaireservation.css" />
 
<script type='text/javascript'>
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.getFullYear();
										 }
 
 
   var dt_datetime = (str_datetime == null || str_datetime =="" ?  new Date() : str2dt(str_datetime));
 
/* JOUR MOIS ET ANNEE PRESENTE*/
   var this_Day = new Date().getDate()
   var this_Month = new Date().getMonth()
	var this_Year = new Date().getFullYear()
 
/* MOIS PRECEDENT */
   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);
 
/* ANNEE PRECEDENTE */   
   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);
 
/* PREMIER JOUR DU MOIS */
   var dt_firstday = new Date(dt_datetime);
   dt_firstday.setDate(1);
   dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
 
/* DERNIER JOUR DU MOIS    */
   var dt_lastday = new Date(dt_next_month);
   dt_lastday.setDate(0);
 
/* TITRE DU CALENDRIER */
   var title_calendar=(str_target=='dd')?'DATE D\'ARRIVEE':'DATE DE DEPART';
 
   // html generation (feel free to tune it for your particular application)
   // ENTETE CALENDRIER
   var StringYear=dt_datetime.getFullYear().toString().substring(dt_datetime.getFullYear().toString().length-2,dt_datetime.getFullYear().toString().length)
   var str_buffer = new String (
      "<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
      "<tr>\n<td bgcolor=\"#4682B4\">"+
      "<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
 
   //ENTETE TABLEAU
   "<tr>\n   <td bgcolor=\"blue\" style='text-align:center;color:white;font-family:verdana;font-weight:bold;font-size:11px;' colspan=\"6\">"+title_calendar+"<\/td>\n"+
   "<td bgcolor=\"blue\" style=\"text-align:center;color:navy;font-family:verdana;font-weight:bold;font-size:10px;background-color:silver;border:outset 2px white;cursor:pointer;\" onclick=\"document.getElementById('DivCalendar').style.display='none';\">X<\/td>\n "+
   "<\/tr>\n"+
 
 
 
// Ligne Année précédente / suivante
      "<tr>\n   <td bgcolor=\"blue\"><a href=\"javascript:show_calendar('"+str_target+"', '"+ 
      dt2dtstr(dt_prev_year)+"');\">"+
      "<img src=\"Images/prev.ico\" 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\">"
      +" 20"+StringYear+"</font></td>\n"+
      "   <td bgcolor=\"blue\" align=\"right\"><a href=\"javascript:show_calendar('"
      +str_target+"', '"+dt2dtstr(dt_next_year)+"');\">"+
      "<img src=\"Images/next.ico\" 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:show_calendar('"+
      str_target+"', '"+ dt2dtstr(dt_prev_month)+"'); \">"+
      "<img src=\"Images/prev.ico\" width=\"16\" height=\"16\" border=\"0\""+
      " alt=\"MP\" title=\""+dt_prev_month+"\"></a></td>\n"+
      "   <td align=\"center\" bgcolor=\"#4682B4\" colspan=\"5\">"+
      "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
      +arr_months[dt_datetime.getMonth()]+" 20"+StringYear+"</font></td>\n"+
      "   <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:show_calendar('"
      +str_target+"', '"+dt2dtstr(dt_next_month)+"');  \">"+
      "<img src=\"Images/next.ico\" width=\"16\" height=\"16\" border=\"0\""+
      " alt=\"MS\"  title=\""+dt_next_month+"\" ></a></td>\n</tr>\n"
 
   ); //end newstring
 
   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 header
      str_buffer += "<tr>\n";
      for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
            if (dt_current_day.getDate() == this_Day &&  dt_current_day.getMonth() == this_Month && dt_current_day.getFullYear()==this_Year ){
 
              // case aujourd'hui
               str_buffer += "   <td bgcolor=\"#FFB6C1\" align=\"right\">";}
 
            else {
            		if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6){
	               	// case de weekend 
   		            	str_buffer += "   <td bgcolor=\"#DBEAF5\" align=\"right\">";
   		            	}
		          else{
       	        	// jour ouvres du mois
          		     	str_buffer += "   <td bgcolor=\"white\" align=\"right\">";
						}
				  }
 
 
if( dt_current_day.getMonth() == this_Month && dt_current_day.getFullYear() == this_Year ){
// mois en cours et jours précédents grisés
           if ((dt_current_day.getDate() >= dt_datetime.getDate()) && (dt_current_day.getMonth() == dt_datetime.getMonth())){
                // jours du mois en cours actifs
               str_buffer += "<a style=\"cursor:pointer;\" onclick=\"document.getElementById('"+str_target+"').value='"+dt2dtstr(dt_current_day)+"'; document.getElementById('DivCalendar').style.display='none'; \">"+
               "<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";}
 
           else {
               // jours des mois précédents et suivants en gris
               str_buffer += "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";}
 
}
else {
if( (dt_current_day.getMonth() > this_Month && dt_current_day.getFullYear() ==this_Year ) || dt_current_day.getFullYear() >this_Year ){ 
// mois futurs
           if ( dt_current_day.getMonth() == dt_datetime.getMonth()){
 
               // jours du mois en cours actifs
               str_buffer += "<a style='cursor:pointer;' onclick=\"document.getElementById('"+str_target+"').value='"+dt2dtstr(dt_current_day)+"'; document.getElementById('DivCalendar').style.display='none';\">"+
               "<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";}
 
           else {
               // jours des mois précédents et suivants en gris
               str_buffer += "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";}
 
}
 
// mois précédents ...  
else{		if( (dt_current_day.getMonth() < this_Month && dt_current_day.getFullYear() == this_Year) || ( dt_current_day.getFullYear() < this_Year)){              
               str_buffer += "<a><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 +=  "</tr>\n</td>\n</table>\n" ;
 
 
 
   fenCalendrier=document.getElementById('DivCalendar');
   fenCalendrier.innerHTML=str_buffer;
   fenCalendrier.style.top=document.getElementById(str_target).offsetTop+"px";
   fenCalendrier.style.left=Number(document.getElementById(str_target).offsetLeft)+Number(document.getElementById(str_target).offsetWidth)+200+"px";
   fenCalendrier.style.display="block"
 
 
 
 
 
 
 
}
// datetime parsing and formatting routines. 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));
}
 
 
 
/***********************************
* Formatage de date pour affichage *
***********************************/
 
function dt2dtstr (dt_datetime) {
   var FormatedDate=""
 
   FormatedDate+=(dt_datetime.getDate().toString().length==1)?"0"+dt_datetime.getDate().toString():dt_datetime.getDate().toString();
   FormatedDate+="/";
   FormatedDate+=((dt_datetime.getMonth()+1).toString().length==1)?"0"+(dt_datetime.getMonth()+1).toString():(dt_datetime.getMonth()+1).toString();
   FormatedDate+="/";
   FormatedDate+="20"+dt_datetime.getFullYear().toString().substring(dt_datetime.getFullYear().toString().length-2,dt_datetime.getFullYear()).toString()
   return FormatedDate;
}
 
function dt2tmstr (dt_datetime) {
   return (new String (dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds()));
}
 
 
 
/*************************
* comparaison des dates  *
*************************/
function comparedate(){
 
var maintenant=new Date()
maintenant=dt2dtstr(maintenant).split('\/').reverse().join('')
 
 
 
if(document.getElementById('da').value.length<1){
                                             alert("Entrez une date d\'arrivee");
                                             return false;
                                             }
 
var date_arrivee=document.getElementById('da').value.split('\/').reverse().join('');
if(date_arrivee<maintenant){
                             alert('vous ne pourrez pas arriver avant aujourd\'hui');
                             return false;
                             }
 
if(document.getElementById('da').value.length<1){
                                                 alert("Entrez une date de départ");
                                                 return false;
                                                 }
 
var date_depart=document.getElementById('dd').value.split('\/').reverse().join('');
if(date_arrivee>date_depart){
                             alert("Vous devez arriver avant de repartir!");
                             return false;
                             }
 
 
else {     
      return true;}
 
}
('votre nom')
</script>
</head>
 
<body>
 
 
<div id="DivCalendar" style=" width:200px;height:235px; z-index:200; display:none;position:absolute; Top:1px;left:1px;"></div>
<input type='text' name='arrivee' id='arrivee' onclick="show_calendar('arrivee',10)"  onfocus="show_calendar('arrivee',10)" style='text-align:right'readonly /><br />
<input type='text' name='depart' id='depart' onclick="show_calendar('depart',10)" onfocus="show_calendar('depart',10)" style='text-align:right'readonly /><br />
 
</body>
</html>

**arnogef** · 27/04/2007, 14h33

merci pour le script
y a-t-il moyen
- que le calendrier s'ouvre quand on clique sur une icone à coté, et vienne remplir une zone de texte
- de centrer le calendrier sur la page ?

Merci

**SpaceFrog** · 27/04/2007, 14h35

oui ...

**arnogef** · 04/05/2007, 13h19

lol merci mais je ne sais pas comment faire...
puis-je avoir quelques pistes?

**SpaceFrog** · 04/05/2007, 18h20

ben là il s'ouvre sur le onfocus ou le onclick de la zone de texte ...
suffit de basculer sur le onclick de l'icone ...

**arnogef** · 05/05/2007, 12h54

ok ca marche merci
derniere question comment faire pour centrer le calendrier (pour qu'il arrive sur l'écran à l'endroit de la zone de texte et pas tout en haut de la page..)

merci

**arnogef** · 05/05/2007, 13h54

j'ai trouvé comment centrer (en enlevant le position absolute)

par contre 'jai probleme, lorsque je clique sur les boutons années ou mois précédents ou suivants, il ne se passe rien
(en bas dans la barre du navigateur s'affiche la fonction: javascript : showcalendar ('date','05-05-2007') mais le calendrier ne bouge pas...

**vasco_di_gama** · 14/05/2007, 13h00

Envoyé par arnogef

ok ca marche merci
derniere question comment faire pour centrer le calendrier (pour qu'il arrive sur l'écran à l'endroit de la zone de texte et pas tout en haut de la page..)

merci

je peux avoir ton code car je travaille sur la mm chose
et merci d'avance

**jonnyboy** · 15/05/2007, 10h25

A priori il suffit que t'enleve la position absolute comme dis plus haut.

Petite question : J'aimerais utilisé ce calendrier pour avoir une date au format année-mois-jour. J'ai vu qu'il y avait une partie "Formatage de date pour affichage". Je l'ai changé en :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function dt2dtstr (dt_datetime) {
	var FormatedDate=""
 
	FormatedDate+="20"+dt_datetime.getFullYear().toString().substring(dt_datetime.getFullYear().toString().length-2,dt_datetime.getFullYear()).toString()
	FormatedDate+="-";
	FormatedDate+=((dt_datetime.getMonth()+1).toString().length==1)?"0"+(dt_datetime.getMonth()+1).toString():(dt_datetime.getMonth()+1).toString();
	FormatedDate+="-";
	FormatedDate+=(dt_datetime.getDate().toString().length==1)?"0"+dt_datetime.getDate().toString():dt_datetime.getDate().toString();
 
	return FormatedDate;
}

Je récupère bien une date au bon format. Mais maintenant, je ne peux plus changer de mois ni d'année lorsque j'ouvre le calendrier. Que dois-je modifier d'autre ?

Merci d'avance

**gastoncs** · 27/08/2009, 02h18

j'ai une question, je souhaiterais sur ce même calendrier grisé les 7 jours suivants la dates actuel, comment faire ? (je ne mi connais pas du tous en js)

calendrier javascript avec dates passées grisées

JavaScript

Discussions similaires

Partager

Partager