[Debutant]récupération d'une Date via calendrier en javascript

Version imprimable

bonjour à tous,
Si mon post n'est pas bien placé je m'en excuse d'avance et les modé ou admin pourront le supprimer

Je travaille sur un outil développé en Php avec une base Mysql
je suis déja tres avancée dans le projet et en fin de projet on me demande d'ajouter un champ.
Il s'agit d'une date, je le fais dans la BDD et je le rajoute au formulaire, j'ajoute à celui-ci un calendrier javascript que j'ai deja utilisé plusieurs fois et qui fonctionne tres bien.
La popup s'ouvre mais lorsque je clique sur le jour, je n'ai pas de retour de la valeur dans la "zone de contrôle" (ou autrement dit le champ)
je vous joins mon code tres simplifié mais je pense que celui-ci n'aide pas tellement à la résolution de ce problème:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html> <head> <title>Cas de test</title> <script language="JavaScript" src="calendar.js"></script> <script language="JavaScript" src="overlib_mini.js"></script> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head> <body bgcolor="#E6E6FA"> <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div> <input type=text name="date_step" value="<?echo $date_step ?>"> <a href="javascript:show_calendar('myForm.date_step');" onMouseOver="window.status='Date Picker'; overlib('Cliquer ici pour choisir une date dans le calendrier en popup'); return true;" onMouseOut="window.status=''; nd(); return true;"> <img src="show-calendar.gif" width=24 height=22 border=0></a> </body> </html>
Merci ^^

ben faut voir ce que fait ta focntion d'affichage du calendrier ...

voilà un truc que j'avais modifié à partir du calendrier en popup de microsoft ...

Code:

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Calendrier SpaceFrog</title>
<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.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);
   var title_calendar=(str_target=='dd')?'DATE D\'ARRIVEE':'DATE DE DEPART';
 
   // html generation (feel free to tune it for your particular application)
   // print calendar header
   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.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\">"
      +" 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.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:show_calendar('"+
      str_target+"', '"+ dt2dtstr(dt_prev_month)+"');\">"+
      "<img src=\"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()]+" 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.gif\" width=\"16\" height=\"16\" border=\"0\""+
      " alt=\"Mois suivant\"></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() == 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 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
               // print days of other months
 
 
               str_buffer += "<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)+"px";
   fenCalendrier.style.display="block"
 
}
// 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));
}
 
 
 
/***********************************
* 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="z-index:2; display:none; width:200px;height:235px; overflow:hidden;position:absolute;Top:1px; left:1px;" ></div>
<form name="calendar" action="javascript:alert('ok')" onsubmit="return comparedate()" method="post">
<input type='text' name='da' id='da' onfocus="show_calendar('da','jj,mm,aaaa')" style='text-align:right' readonly/><br/>
<input type='text' name='dd' id='dd' onfocus="show_calendar('dd')" readonly style='text-align:right' />
<input type='submit' value='envoyer'/>
</form>
</body>
 
</html>

je n'arrive pas à utiliser ton calendrier, je ne veux pas que ça ouvre une autre page ou que ça fasse des contrôle je veux juste retrouver la date sur laquelle j'ai cliqué je joins le script que j'ai. A savoir qu'il marche tres bien sur tous les autres champs date que j'ai dans l'application

Code:

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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
 
 
 
var weekend = [0,6];
var weekendColor = "#e0e0e0";
var fontface = "Verdana";
var fontsize = 8;           // in "pt" units; used with "font-size" style element
 
var gNow = new Date();
var ggWinContent;
var ggPosX = -1;
var ggPosY = -1;
 
Calendar.Months = ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre"];
 
// Non-Leap year Month days..
Calendar.DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// Leap year Month days..
Calendar.lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
function Calendar(p_item, p_month, p_year, p_format) {
    if ((p_month == null) && (p_year == null))  return;
 
    if (p_month == null) {
        this.gMonthName = null;
        this.gMonth = null;
        this.gYearly = true;
    } else {
        this.gMonthName = Calendar.get_month(p_month);
        this.gMonth = new Number(p_month);
        this.gYearly = false;
    }
 
    this.gYear = p_year;
    this.gFormat = p_format;
    this.gBGColor = "white";
    this.gFGColor = "black";
    this.gTextColor = "black";
    this.gHeaderColor = "black";
    this.gReturnItem = p_item;
}
 
Calendar.get_month = Calendar_get_month;
Calendar.get_daysofmonth = Calendar_get_daysofmonth;
Calendar.calc_month_year = Calendar_calc_month_year;
 
function Calendar_get_month(monthNo) {
    return Calendar.Months[monthNo];
}
 
function Calendar_get_daysofmonth(monthNo, p_year) {
    /* 
    Check for leap year ..
    1.Years evenly divisible by four are normally leap years, except for... 
    2.Years also evenly divisible by 100 are not leap years, except for... 
    3.Years also evenly divisible by 400 are leap years. 
    */
    if ((p_year % 4) == 0) {
        if ((p_year % 100) == 0 && (p_year % 400) != 0)
            return Calendar.DOMonth[monthNo];
 
        return Calendar.lDOMonth[monthNo];
    } else
        return Calendar.DOMonth[monthNo];
}
 
function Calendar_calc_month_year(p_Month, p_Year, incr) {
    /* 
    Will return an 1-D array with 1st element being the calculated month 
    and second being the calculated year 
    after applying the month increment/decrement as specified by 'incr' parameter.
    'incr' will normally have 1/-1 to navigate thru the months.
    */
    var ret_arr = new Array();
 
    if (incr == -1) {
        // B A C K W A R D
        if (p_Month == 0) {
            ret_arr[0] = 11;
            ret_arr[1] = parseInt(p_Year) - 1;
        }
        else {
            ret_arr[0] = parseInt(p_Month) - 1;
            ret_arr[1] = parseInt(p_Year);
        }
    } else if (incr == 1) {
        // F O R W A R D
        if (p_Month == 11) {
            ret_arr[0] = 0;
            ret_arr[1] = parseInt(p_Year) + 1;
        }
        else {
            ret_arr[0] = parseInt(p_Month) + 1;
            ret_arr[1] = parseInt(p_Year);
        }
    }
 
    return ret_arr;
}
 
function Calendar_calc_month_year(p_Month, p_Year, incr) {
    /* 
    Will return an 1-D array with 1st element being the calculated month 
    and second being the calculated year 
    after applying the month increment/decrement as specified by 'incr' parameter.
    'incr' will normally have 1/-1 to navigate thru the months.
    */
    var ret_arr = new Array();
 
    if (incr == -1) {
        // B A C K W A R D
        if (p_Month == 0) {
            ret_arr[0] = 11;
            ret_arr[1] = parseInt(p_Year) - 1;
        }
        else {
            ret_arr[0] = parseInt(p_Month) - 1;
            ret_arr[1] = parseInt(p_Year);
        }
    } else if (incr == 1) {
        // F O R W A R D
        if (p_Month == 11) {
            ret_arr[0] = 0;
            ret_arr[1] = parseInt(p_Year) + 1;
        }
        else {
            ret_arr[0] = parseInt(p_Month) + 1;
            ret_arr[1] = parseInt(p_Year);
        }
    }
 
    return ret_arr;
}
 
// This is for compatibility with Navigator 3, we have to create and discard one object before the prototype object exists.
new Calendar();
 
Calendar.prototype.getMonthlyCalendarCode = function() {
    var vCode = "";
    var vHeader_Code = "";
    var vData_Code = "";
 
    // Begin Table Drawing code here..
    vCode += ("<div align=center><TABLE BORDER=1 BGCOLOR=\"" + this.gBGColor + "\" style='font-size:" + fontsize + "pt;'>");
 
    vHeader_Code = this.cal_header();
    vData_Code = this.cal_data();
    vCode += (vHeader_Code + vData_Code);
 
    vCode += "</TABLE></div>";
 
    return vCode;
}
 
Calendar.prototype.show = function() {
    var vCode = "";
 
    // build content into global var ggWinContent
    ggWinContent += ("<FONT FACE='" + fontface + "' ><B>");
    ggWinContent += (this.gMonthName + " " + this.gYear);
    ggWinContent += "</B><BR>";
 
    // Show navigation buttons
    var prevMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, -1);
    var prevMM = prevMMYYYY[0];
    var prevYYYY = prevMMYYYY[1];
 
    var nextMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, 1);
    var nextMM = nextMMYYYY[0];
    var nextYYYY = nextMMYYYY[1];
 
    ggWinContent += ("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0' style='font-size:" + fontsize + "pt;'><TR><TD ALIGN=center>");
    ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
        "onMouseOver=\"window.status='Go back one year'; return true;\" " +
        "onMouseOut=\"window.status=''; return true;\" " +
        "onClick=\"Build(" + 
        "'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)-1) + "', '" + this.gFormat + "'" +
        ");" +
        "\"><<Année<\/A>]</TD><TD ALIGN=center>");
    ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
        "onMouseOver=\"window.status='Go back one month'; return true;\" " +
        "onMouseOut=\"window.status=''; return true;\" " +
        "onClick=\"Build(" + 
        "'" + this.gReturnItem + "', '" + prevMM + "', '" + prevYYYY + "', '" + this.gFormat + "'" +
        ");" +
        "\"><Mois<\/A>]</TD><TD ALIGN=center>");
    ggWinContent += "       </TD><TD ALIGN=center>";
    ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
        "onMouseOver=\"window.status='Go forward one month'; return true;\" " +
        "onMouseOut=\"window.status=''; return true;\" " +
        "onClick=\"Build(" + 
        "'" + this.gReturnItem + "', '" + nextMM + "', '" + nextYYYY + "', '" + this.gFormat + "'" +
        ");" +
        "\">Mois><\/A>]</TD><TD ALIGN=center>");
    ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
        "onMouseOver=\"window.status='Go forward one year'; return true;\" " +
        "onMouseOut=\"window.status=''; return true;\" " +
        "onClick=\"Build(" + 
        "'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)+1) + "', '" + this.gFormat + "'" +
        ");" +
        "\">Année>><\/A>]</TD></TR></TABLE><BR>");
 
    // Get the complete calendar code for the month, and add it to the
    //  content var
    vCode = this.getMonthlyCalendarCode();
    ggWinContent += vCode;
}
 
Calendar.prototype.showY = function() {
    var vCode = "";
    var i;
 
    ggWinContent += "<FONT FACE='" + fontface + "' ><B>"
    ggWinContent += ("Année: " + this.gYear);
    ggWinContent += "</B><BR>";
 
    // Show navigation buttons
    var prevYYYY = parseInt(this.gYear) - 1;
    var nextYYYY = parseInt(this.gYear) + 1;
 
    ggWinContent += ("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0' style='font-size:" + fontsize + "pt;'><TR><TD ALIGN=center>");
    ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
        "onMouseOver=\"window.status='Go back one year'; return true;\" " +
        "onMouseOut=\"window.status=''; return true;\" " +
        "onClick=\"Build(" + 
        "'" + this.gReturnItem + "', null, '" + prevYYYY + "', '" + this.gFormat + "'" +
        ");" +
        "\"><<Année<\/A>]</TD><TD ALIGN=center>");
    ggWinContent += "       </TD><TD ALIGN=center>";
    ggWinContent += ("[<A HREF=\"javascript:void(0);\" " +
        "onMouseOver=\"window.status='Go forward one year'; return true;\" " +
        "onMouseOut=\"window.status=''; return true;\" " +
        "onClick=\"Build(" + 
        "'" + this.gReturnItem + "', null, '" + nextYYYY + "', '" + this.gFormat + "'" +
        ");" +
        "\">Année>><\/A>]</TD></TR></TABLE><BR>");
 
    // Get the complete calendar code for each month.
    // start a table and first row in the table
    ggWinContent += ("<TABLE WIDTH='100%' BORDER=0 CELLSPACING=0 CELLPADDING=5 style='font-size:" + fontsize + "pt;'><TR>");
    var j;
    for (i=0; i<12; i++) {
        // start the table cell
        ggWinContent += "<TD ALIGN='center' VALIGN='top'>";
        this.gMonth = i;
        this.gMonthName = Calendar.get_month(this.gMonth);
        vCode = this.getMonthlyCalendarCode();
        ggWinContent += (this.gMonthName + "/" + this.gYear + "<BR>");
        ggWinContent += vCode;
        ggWinContent += "</TD>";
        if (i == 3 || i == 7) {
            ggWinContent += "</TR><TR>";
            }
 
    }
 
    ggWinContent += "</TR></TABLE></font><BR>";
}
 
Calendar.prototype.cal_header = function() {
    var vCode = "";
 
    vCode = vCode + "<TR>";
    vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Dim</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Lun</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Mar</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Jeu</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Ven</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='16%'><FONT FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Sam</B></FONT></TD>";
    vCode = vCode + "</TR>";
 
    return vCode;
}
 
Calendar.prototype.cal_data = function() {
    var vDate = new Date();
    vDate.setDate(1);
    vDate.setMonth(this.gMonth);
    vDate.setFullYear(this.gYear);
 
    var vFirstDay=vDate.getDay();
    var vDay=1;
    var vLastDay=Calendar.get_daysofmonth(this.gMonth, this.gYear);
    var vOnLastDay=0;
    var vCode = "";
 
    /*
    Get day for the 1st of the requested month/year..
    Place as many blank cells before the 1st day of the month as necessary. 
    */
    vCode = vCode + "<TR>";
    for (i=0; i<vFirstDay; i++) {
        vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(i) + "><FONT FACE='" + fontface + "'> </FONT></TD>";
    }
 
    // Write rest of the 1st week
    for (j=vFirstDay; j<7; j++) {
        vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT FACE='" + fontface + "'>" + 
            "<A HREF='javascript:void(0);' " + 
                "onMouseOver=\"window.status='set date to " + this.format_data(vDay) + "'; return true;\" " +
                "onMouseOut=\"window.status=' '; return true;\" " +
                "onClick=\"document." + this.gReturnItem + ".value='" + 
                this.format_data(vDay) + 
                "';ggPosX=-1;ggPosY=-1;nd();nd();\">" + 
                this.format_day(vDay) + 
            "</A>" + 
            "</FONT></TD>";
        vDay=vDay + 1;
    }
    vCode = vCode + "</TR>";
 
    // Write the rest of the weeks
    for (k=2; k<7; k++) {
        vCode = vCode + "<TR>";
 
        for (j=0; j<7; j++) {
            vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT FACE='" + fontface + "'>" + 
                "<A HREF='javascript:void(0);' " +
                    "onMouseOver=\"window.status='set date to " + this.format_data(vDay) + "'; return true;\" " +
                    "onMouseOut=\"window.status=' '; return true;\" " +
                    "onClick=\"document." + this.gReturnItem + ".value='" + 
                    this.format_data(vDay) + 
                    "';window.scroll(0,ggPosY);ggPosX=-1;ggPosY=-1;nd();nd();\">" + 
                this.format_day(vDay) + 
                "</A>" + 
                "</FONT></TD>";
            vDay=vDay + 1;
 
            if (vDay > vLastDay) {
                vOnLastDay = 1;
                break;
            }
        }
 
        if (j == 6)
            vCode = vCode + "</TR>";
        if (vOnLastDay == 1)
            break;
    }
 
    // Fill up the rest of last week with proper blanks, so that we get proper square blocks
    for (m=1; m<(7-j); m++) {
        if (this.gYearly)
            vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) + 
            "><FONT FACE='" + fontface + "' COLOR='gray'> </FONT></TD>";
        else
            vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) + 
            "><FONT FACE='" + fontface + "' COLOR='gray'>" + m + "</FONT></TD>";
    }
 
    return vCode;
}
 
Calendar.prototype.format_day = function(vday) {
    var vNowDay = gNow.getDate();
    var vNowMonth = gNow.getMonth();
    var vNowYear = gNow.getFullYear();
 
    if (vday == vNowDay && this.gMonth == vNowMonth && this.gYear == vNowYear)
        return ("<FONT COLOR=\"RED\"><B>" + vday + "</B></FONT>");
    else
        return (vday);
}
 
Calendar.prototype.write_weekend_string = function(vday) {
    var i;
 
    // Return special formatting for the weekend day.
    for (i=0; i<weekend.length; i++) {
        if (vday == weekend[i])
            return (" BGCOLOR=\"" + weekendColor + "\"");
    }
 
    return "";
}
 
Calendar.prototype.format_data = function(p_day) {
    var vData;
    var vMonth = 1 + this.gMonth;
    vMonth = (vMonth.toString().length < 2) ? "0" + vMonth : vMonth;
    var vMon = Calendar.get_month(this.gMonth).substr(0,3).toUpperCase();
    var vFMon = Calendar.get_month(this.gMonth).toUpperCase();
    var vY4 = new String(this.gYear);
    var vY2 = new String(this.gYear.substr(2,2));
    var vDD = (p_day.toString().length < 2) ? "0" + p_day : p_day;
 
    switch (this.gFormat) {
        case "MM\/DD\/YYYY" :
            vData = vMonth + "\/" + vDD + "\/" + vY4;
            break;
        case "MM\/DD\/YY" :
            vData = vMonth + "\/" + vDD + "\/" + vY2;
            break;
        case "MM-DD-YYYY" :
            vData = vMonth + "-" + vDD + "-" + vY4;
            break;
        case "YYYY-MM-DD" :
            vData = vY4 + "-" + vMonth + "-" + vDD;
            break;
        case "MM-DD-YY" :
            vData = vMonth + "-" + vDD + "-" + vY2;
            break;
        case "DD\/MON\/YYYY" :
            vData = vDD + "\/" + vMon + "\/" + vY4;
            break;
        case "DD\/MON\/YY" :
            vData = vDD + "\/" + vMon + "\/" + vY2;
            break;
        case "DD-MON-YYYY" :
            vData = vDD + "-" + vMon + "-" + vY4;
            break;
        case "DD-MON-YY" :
            vData = vDD + "-" + vMon + "-" + vY2;
            break;
        case "DD\/MONTH\/YYYY" :
            vData = vDD + "\/" + vFMon + "\/" + vY4;
            break;
        case "DD\/MONTH\/YY" :
            vData = vDD + "\/" + vFMon + "\/" + vY2;
            break;
        case "DD-MONTH-YYYY" :
            vData = vDD + "-" + vFMon + "-" + vY4;
            break;
        case "DD-MONTH-YY" :
            vData = vDD + "-" + vFMon + "-" + vY2;
            break;
        case "DD\/MM\/YYYY" :
            vData = vDD + "\/" + vMonth + "\/" + vY4;
            break;
        case "DD\/MM\/YY" :
            vData = vDD + "\/" + vMonth + "\/" + vY2;
            break;
        case "DD-MM-YYYY" :
            vData = vDD + "-" + vMonth + "-" + vY4;
            break;
        case "DD-MM-YY" :
            vData = vDD + "-" + vMonth + "-" + vY2;
            break;
        default :
            vData = vMonth + "\/" + vDD + "\/" + vY4;
    }
 
    return vData;
}
 
function Build(p_item, p_month, p_year, p_format) {
    gCal = new Calendar(p_item, p_month, p_year, p_format);
 
    // Customize your Calendar here..
    gCal.gBGColor="white";
    gCal.gLinkColor="black";
    gCal.gTextColor="black";
    gCal.gHeaderColor="darkgreen";
 
    // initialize the content string
    ggWinContent = "";
 
    // Choose appropriate show function
    if (gCal.gYearly) {
        // and, since the yearly calendar is so large, override the positioning and fontsize
        // warning: in IE6, it appears that "select" fields on the form will still show
        //  through the "over" div; Note: you can set these variables as part of the onClick
        //  javascript code before you call the show_yearly_calendar function
        if (ggPosX == -1) ggPosX = 10;
        if (ggPosY == -1) ggPosY = 10;
        if (fontsize == 8) fontsize = 6;
        // generate the calendar
        gCal.showY();
        }
    else {
        gCal.show();
        }
 
    // if this is the first calendar popup, use autopositioning with an offset
    if (ggPosX == -1 && ggPosY == -1) {
        overlib(ggWinContent, AUTOSTATUSCAP, STICKY, CLOSECLICK, CSSSTYLE,
            TEXTSIZEUNIT, "pt", TEXTSIZE, 8, CAPTIONSIZEUNIT, "pt", CAPTIONSIZE, 8, CLOSESIZEUNIT, "pt", CLOSESIZE, 8,
            CAPTION, "Selectionner une date", OFFSETX, 20, OFFSETY, -20);
        // save where the 'over' div ended up; we want to stay in the same place if the user
        //  clicks on one of the year or month navigation links
        if ( (ns4) || (ie4) ) {
                ggPosX = parseInt(over.left);
                ggPosY = parseInt(over.top);
            } else if (ns6) {
            ggPosX = parseInt(over.style.left);
            ggPosY = parseInt(over.style.top);
            }
        }
    else {
        // we have a saved X & Y position, so use those with the FIXX and FIXY options
        overlib(ggWinContent, AUTOSTATUSCAP, STICKY, CLOSECLICK, CSSSTYLE,
            TEXTSIZEUNIT, "pt", TEXTSIZE, 8, CAPTIONSIZEUNIT, "pt", CAPTIONSIZE, 8, CLOSESIZEUNIT, "pt", CLOSESIZE, 8,
            CAPTION, "Select a date", FIXX, ggPosX, FIXY, ggPosY);
        }
    window.scroll(ggPosX, ggPosY);
}
 
function show_calendar() {
    /* 
        p_month : 0-11 for Jan-Dec; 12 for All Months.
        p_year  : 4-digit year
        p_format: Date format (mm/dd/yyyy, dd/mm/yy, ...)
        p_item  : Return Item.
    */
 
    p_item = arguments[0];
    if (arguments[1] == null)
        p_month = new String(gNow.getMonth());
    else
        p_month = arguments[1];
    if (arguments[2] == "" || arguments[2] == null)
        p_year = new String(gNow.getFullYear().toString());
    else
        p_year = arguments[2];
    if (arguments[3] == null)
        p_format = "DD/MM/YYYY";
    else
        p_format = arguments[3];
 
    Build(p_item, p_month, p_year, p_format);
}
/*
Yearly Calendar Code Starts here
*/
function show_yearly_calendar() {
    // Load the defaults..
    //if (p_year == null || p_year == "")
    //  p_year = new String(gNow.getFullYear().toString());
    //if (p_format == null || p_format == "")
    //  p_format = "YYYY-MM-DD";
 
    p_item = arguments[0];
    if (arguments[1] == "" || arguments[1] == null)
        p_year = new String(gNow.getFullYear().toString());
    else
        p_year = arguments[1];
    if (arguments[2] == null)
        p_format = "YYYY-MM-DD";
    else
        p_format = arguments[2];
 
    Build(p_item, null, p_year, p_format);
}

Voila un exemple qui peut vous aider:
Fichier HTML:

Code:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.ds_box {
	background-color: #FFF;
	border: 1px solid #000;
	position: absolute;
	z-index: 1;/*32767;*/
}
.ds_tbl {
	background-color: #FFF;
}
.ds_head {
	background-color: #333;
	color: #838384; /*#FFF;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
/*	text-align: center;*/
	letter-spacing: 2px;
}
.ds_subhead {
	background-color: #CCC;
	color: #000;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	width: 32px;
}
.ds_cell {
	background-color: #EEE;
	color: #000;
	font-size: 10px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	padding: 5px;
	cursor: pointer;
}
 
.ds_cell:hover {
	background-color: #F3F3F3;
} /* This hover code won't work for IE */
 
.menu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #838384;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;	
}
.menu:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #FF6600;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;	
}
 
</style>
</head>
<body>
<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
<tr><td id="ds_calclass">
</td></tr>
</table>
<script language="JavaScript" src="calendrierf.js"></script>
<form action="" method="post">
<div>
<b>Exemple de formulaire</b><br/>
Veuillez entrez une date : <input onclick="ds_sh(this);" name="date" readonly="readonly" style="cursor: text" /><br />
Veuillez entrez une autre date : <input onclick="ds_sh(this);" name="date2" readonly="readonly" style="cursor: text" /><br />
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</form>
</body>
</html>

le script calendrierf.js :

Code:

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
var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();
// Get Element By Id
function ds_getel(id) {
	return document.getElementById(id);
}
 
// Get the left and the top of the element.
function ds_getleft(el) {
	var tmp = el.offsetLeft;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetLeft;
		el = el.offsetParent;
	}
	return tmp;
}
function ds_gettop(el) {
	var tmp = el.offsetTop;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetTop;
		el = el.offsetParent;
	}
	return tmp;
}
 
// Output Element
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');
 
// Output Buffering
var ds_ob = ''; 
function ds_ob_clean() {
	ds_ob = '';
}
function ds_ob_flush() {
	ds_oe.innerHTML = ds_ob;
	ds_ob_clean();
}
function ds_echo(t) {
	ds_ob += t;
}
 
var ds_element; // Text Element...
 
var ds_monthnames = [
'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
]; // You can translate it for your language.
 
var ds_daynames = [
'Dim', 'Lun', 'Mar', 'Me', 'Jeu', 'Ven', 'Sam'
]; // You can translate it for your language.
 
// Calendar template
function ds_template_main_above(t) {
	return '<table cellpadding="0" cellspacing="0" class="ds_tbl" >'
	     + '<tr>'
		 + '<td class="ds_head" style="cursor: pointer" >&nbsp;</td>'
		 + '<td class="ds_head" style="cursor: pointer" ><a href="javascript:ds_py();" class="menu">&lt;&lt;</a></td>'
		 + '<td class="ds_head" style="cursor: pointer" ><a href="javascript:ds_pm();" class="menu">&lt;</a></td>'
		 + '<td class="ds_head" style="cursor: pointer" ><a href="javascript:ds_nm();" class="menu">&gt;</a></td>'
		 + '<td class="ds_head" style="cursor: pointer" ><a href="javascript:ds_ny();" class="menu">&gt;&gt;</a></td>'
		 + '<td class="ds_head" align="right" style="cursor: pointer" colspan="2"><a href="javascript:ds_hi();" class="menu">X</a></td>'
		 + '</tr>'
	     + '<tr>'
		 + '<td colspan="7" class="ds_head" align="center">' + t + '</td>'
		 + '</tr>'
		 + '<tr>';
}
 
function ds_template_day_row(t) {
	return '<td class="ds_subhead">' + t + '</td>';
	// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
}
function ds_template_new_week() {
	return '</tr><tr>';
}
function ds_template_blank_cell(colspan) {
	return '<td class="ds_cell" style="cursor: text"  colspan="' + colspan + '"></td>'
}
function ds_template_day(d, m, y) {
	if ( d==ds_i_date.getDate() &&  m == ds_i_date.getMonth()+1  &&  y== ds_i_date.getFullYear()  ) 
		return '<td class="menu" align="center" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';// Define width the day row.
	else	
		return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';	
}
function ds_template_main_below() {
	return '</tr>'
	     + '</table>';
}
// This one draws calendar...
function ds_draw_calendar(m, y) {
	// First clean the output buffer.
	ds_ob_clean();
	// Here we go, do the header
	ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
	for (i = 0; i < 7; i ++) {
		ds_echo (ds_template_day_row(ds_daynames[i]));
	}
	// Make a date object.
	var ds_dc_date = new Date();
	ds_dc_date.setMonth(m - 1);
	ds_dc_date.setFullYear(y);
	ds_dc_date.setDate(1);
	if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
		days = 31;
	} else if (m == 4 || m == 6 || m == 9 || m == 11) {
		days = 30;
	} else {
		days = (y % 4 == 0) ? 29 : 28;
	}
	var first_day = ds_dc_date.getDay();
	var first_loop = 1;
	// Start the first week
	ds_echo (ds_template_new_week());
	// If sunday is not the first day of the month, make a blank cell...
	if (first_day != 0) {
		ds_echo (ds_template_blank_cell(first_day));
	}
	var j = first_day;
	for (i = 0; i < days; i ++) {
		// Today is sunday, make a new week.
		// If this sunday is the first day of the month,
		// we've made a new row for you already.
		if (j == 0 && !first_loop) {
			// New week!!
			ds_echo (ds_template_new_week());
		}
		// Make a row of that day!
		ds_echo (ds_template_day(i + 1, m, y));
		// This is not first loop anymore...
		first_loop = 0;
		// What is the next day?
		j ++;
		j %= 7;
	}
	if (j!=0) {
		ds_echo (ds_template_blank_cell(7-j));
	}
	// Do the footer
	ds_echo (ds_template_main_below());
	// And let's display..
	ds_ob_flush();
	// Scroll it into view.
	//ds_ce.scrollIntoView();
 
}
 
// A function to show the calendar.
// When user click on the date, it will set the content of t.
function ds_sh(t) {
	// Set the element to set...
	ds_element = t;
	// Make a new date, and set the current month and year.
	var ds_sh_date = new Date();
	ds_c_month = ds_sh_date.getMonth() + 1;
	ds_c_year = ds_sh_date.getFullYear();
	// Draw the calendar
	ds_draw_calendar(ds_c_month, ds_c_year);
	// To change the position properly, we must show it first.
	ds_ce.style.display = '';
	// Move the calendar container!
	the_left = ds_getleft(t);
	the_top = ds_gettop(t) + t.offsetHeight;
	ds_ce.style.left = the_left + 'px';
	ds_ce.style.top = the_top + 'px';
	// Scroll it into view.
	//ds_ce.scrollIntoView();
 
}
 
// Hide the calendar.
function ds_hi() {
	ds_ce.style.display = 'none';
}
 
// Moves to the next month...
function ds_nm() {
	// Increase the current month.
	ds_c_month ++;
	// We have passed December, let's go to the next year.
	// Increase the current year, and set the current month to January.
	if (ds_c_month > 12) {
		ds_c_month = 1; 
		ds_c_year++;
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}
 
// Moves to the previous month...
function ds_pm() {
	ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
	// We have passed January, let's go back to the previous year.
	// Decrease the current year, and set the current month to December.
	if (ds_c_month < 1) {
		ds_c_month = 12; 
		ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}
 
// Moves to the next year...
function ds_ny() {
	// Increase the current year.
	ds_c_year++;
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}
 
// Moves to the previous year...
function ds_py() {
	// Decrease the current year.
	ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}
 
// Format the date to output.
function ds_format_date(d, m, y) {
	// 2 digits month.
	m2 = '00' + m;
	m2 = m2.substr(m2.length - 2);
	// 2 digits day.
	d2 = '00' + d;
	d2 = d2.substr(d2.length - 2);
	// YYYY-MM-DD
	return y + '-' + m2 + '-' + d2; /* retour du resultat 9999-99-99 */
//	return d2 + '-' + m2 + '-' + y;
}
 
// When the user clicks the day.
function ds_onclick(d, m, y) {
	// Hide the calendar.
	ds_hi();
	// Set the value of it, if we can.
	if (typeof(ds_element.value) != 'undefined') {
		ds_element.value = ds_format_date(d, m, y);
	// Maybe we want to set the HTML in it.
	} else if (typeof(ds_element.innerHTML) != 'undefined') {
		ds_element.innerHTML = ds_format_date(d, m, y);
	// I don't know how should we display it, just alert it to user.
	} else {
		alert (ds_format_date(d, m, y));
	}
}
function aa(){
//alert('y: '+document.getElementById('ds_conclass').offsetLeft+'x:'+ document.getElementById('ds_conclass').offsetTop);
//alert('y: '+document.getElementById('ds_conclass').offsetWidth+'x:'+ document.getElementById('ds_conclass').offsetHeight);// width= height=
/*
 
//alert(event.clientX); //+' X1+2: '+ (X1+X2) );
//alert(X1); //+' X1+2: '+ (X1+X2) );
*/
X1 =document.getElementById('ds_conclass').offsetLeft;
X2 =document.getElementById('ds_conclass').offsetWidth;
Y1=document.getElementById('ds_conclass').offsetTop;
Y2=document.getElementById('ds_conclass').offsetHeight;
document.frmMain.TITRE.value=event.clientY;
document.frmMain.DATE_DEB.value=Y1;
if (event.clientX-4 < X1 || event.clientX+3 > X1+X2 )//  ||  event.clientY < Y1-20 || event.clientY > Y1+Y2+20
	ds_hi();
////document.getElementByName('TITRE').value =event.clientX;
}

08/12/2006, 09h51
chihiro_ba

Merci pour ces précisions, mais je ne vais pas changer tout mon code je passe donc le post en résolu... même s'il ne l'ai pas