Saisie date avec Calendrier

Bonjour,
Dans un formulaire j'utilise un petit calendrier en JS pour remplir un champs "date".
J'ai un petit soucis sur les mois de 30 jours je me retrouve avec un décalage de deux jours.
Par exemple le 01/04/2008 s'affiche au niveau du Jeudi et non du Mardi.
Je mets le code si quelqu'un pouvait jeter un petit coup d'oeil :

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

<script type="text/javascript">   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="3" cellspacing="1" class="ds_tbl">' + '<tr>' + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();">&lt;&lt;</td>' + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();">&lt;</td>' + '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Fermer]</td>' + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">&gt;</td>' + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">&gt;&gt;</td>' + '</tr>' + '<tr>' + '<td colspan="7" class="ds_head">' + 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 colspan="' + colspan + '"></td>' }   function ds_template_day(d, m, y) { return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>'; // Define width the day row. }   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;     } // 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 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)); } } </script>

---

Merci

= > cf les contributions
le_chomeur nous a mis un joli calendrier qui fonctionne au poil ...

J'avais déjà testé ce calendrier qui est très bien d'ailleurs, mais je me suis ensuite tourné vers le script que j'ai posté (ce n'était qu'un problème au niveau des selects qui disparaissent).

Bonjour,

J'ai le même problème sur un script similaire. Si quelqu'un a la réponse, ça fera au moins deux heureux dans l'immédiat.

allez ...
voici la V2 du calendrier en exclue ;)

plusieurs nouveauté que je vous laisse découvrir notament le passage par l'iframe plutot que masquage des sélects :

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 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Calendrier V2</title> <script type="text/javascript">   var timer = null; var OldDiv = ""; var TimerRunning = false; // ## PARAMETRE D'AFFICHAGE du CALENDRIER ## // //si enLigne est a true , le calendrier s'affiche sur une seule ligne, //sinon il prend la taille spécifié par défaut;   var largeur = "210"; var separateur = "/";   /* ##################### CONFIGURATION ##################### */   /* ##- INITIALISATION DES VARIABLES -##*/ var calendrierSortie = ''; //Date actuelle var today = ''; //Mois actuel var current_month = ''; //Année actuelle var current_year = '' ; //Jours actuel var current_day = ''; //Nombres de jours depuis le début de la semaine var current_day_since_start_week = ''; //On initialise le nom des mois et le nom des jours en VF :) var month_name = new Array('Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre'); var day_name = new Array('L','M','M','J','V','S','D'); //permet de récupèrer l'input sur lequel on a clické et de le remplir avec la date formatée var myObjectClick = null; //Classe qui sera détecté pour afficher le calendrier var classMove = "calendrier"; //Variable permettant de savoir si on doit garder en mémoire le champs input clické var lastInput = null; //Div du calendrier var div_calendar = ""; var year, month, day = ""; /* ##################### FIN DE LA CONFIGURATION ##################### */   //########################## Fonction permettant de remplacer "document.getElementById" ########################## // function $(element){ return document.getElementById(element); }     //Permet de faire glisser une div de la gauche vers la droite function slideUp(bigMenu,smallMenu){ //Si le timer n'est pas finit on détruit l'ancienne div if(parseInt($(bigMenu).style.left) < 0){ $(bigMenu).style.left = parseInt($(bigMenu).style.left) + 10 + "px"; $(smallMenu).style.left =parseInt($(smallMenu).style.left) + 10 + "px"; timer = setTimeout('slideUp("'+bigMenu+'","'+smallMenu+'")',10); } else{ clearTimeout(timer); TimerRunning = false; $(smallMenu).parentNode.removeChild($(smallMenu)); //alert("timer up bien kill"); } }   //Permet de faire glisser une div de la droite vers la gauche function slideDown(bigMenu,smallMenu){ if(parseInt($(bigMenu).style.left) > 0){ $(bigMenu).style.left = parseInt($(bigMenu).style.left) - 10 + "px"; $(smallMenu).style.left =parseInt($(smallMenu).style.left) - 10 + "px"; timer = setTimeout('slideDown("'+bigMenu+'","'+smallMenu+'")',10); } else{ clearTimeout(timer); TimerRunning = false; //delete de l'ancienne $(smallMenu).parentNode.removeChild($(smallMenu)); //alert("timer down bien kill"); } }   //Création d'une nouvelle div contenant les jours du calendrier function CreateDivTempo(From){ if(!TimerRunning){ var DateTemp = new Date(); IdTemp = DateTemp.getMilliseconds(); var NewDiv = document.createElement('DIV'); NewDiv.style.position = "absolute"; NewDiv.style.top = "0px"; NewDiv.style.width = "100%"; NewDiv.className = "ListeDate"; NewDiv.id = IdTemp; //remplissage NewDiv.innerHTML = CreateDayCalandar(year, month, day);   $("Contenant_Calendar").appendChild(NewDiv);   if(From == "left"){ TimerRunning = true; NewDiv.style.left = "-"+largeur+"px"; slideUp(NewDiv.id,OldDiv); } else if(From == "right"){ TimerRunning = true; NewDiv.style.left = largeur+"px"; slideDown(NewDiv.id,OldDiv); } else{ ""; NewDiv.style.left = 0+"px"; } $('Contenant_Calendar').style.height = NewDiv.offsetHeight+"px"; $('Contenant_Calendar').style.zIndex = "200"; OldDiv = NewDiv.id; } }   //########################## FIN DES FONCTION LISTENER ########################## // /*Ajout du listener pour détecter le click sur l'élément et afficher le calendrier uniquement sur les textbox de class css date */   //Fonction permettant d'initialiser les listeners function init_evenement(){ //On commence par affecter une fonction à chaque évènement de la souris if(window.attachEvent){ document.onmousedown = start; document.onmouseup = drop; } else{ document.addEventListener("mousedown",start, false); document.addEventListener("mouseup",drop, false); } } //Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe function start(e){ //On initialise l'évènement s'il n'a aps été créé ( sous ie ) if(!e){ e = window.event; } //Détection de l'élément sur lequel on a clické var monElement = null; monElement = (e.target)? e.target:e.srcElement; if(monElement != null && monElement) { //On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables getClassDrag(monElement);   if(myObjectClick){ initialiserCalendrier(monElement); lastInput = myObjectClick; } } } function drop(){ myObjectClick = null; } //########################## Fonction permettant de récupèrer la liste des classes d'un objet ##########################// function getClassDrag(myObject){ with(myObject){ var x = className; listeClass = x.split(" "); //On parcours le tableau pour voir si l'objet est de type calendrier for(var i = 0 ; i < listeClass.length ; i++){ if(listeClass[i] == classMove){ myObjectClick = myObject; break; } } } }   //########################## Pour combler un bug d'ie 6 on masque les select ########################## // function masquerSelect(){ var ua = navigator.userAgent.toLowerCase(); var versionNav = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) ); var isIE = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) );   if(isIE && (versionNav < 7)){ svn=document.getElementsByTagName("SELECT"); for (a=0;a<svn.length;a++){ svn[a].style.visibility="hidden"; } } }   function montrerSelect(){ var ua = navigator.userAgent.toLowerCase(); var versionNav = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) ); var isIE = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) ); if(isIE && versionNav < 7){ svn=document.getElementsByTagName("SELECT"); for (a=0;a<svn.length;a++){ svn[a].style.visibility="visible"; } } }   function createFrame(){ var newFrame = document.createElement('iframe'); newFrame.style.width = largeur+"px"; newFrame.style.height = div_calendar.offsetHeight+"px"; newFrame.style.zIndex = "0"; newFrame.frameBorder="0"; newFrame.style.position = "absolute"; newFrame.style.visibility = "hidden"; newFrame.style.top = 0+"px"; newFrame.style.left = 0+"px"; div_calendar.appendChild(newFrame); }   //######################## FONCTIONS PROPRE AU CALENDRIER ########################## // //Fonction permettant de passer a l'annee précédente function annee_precedente(){   //On récupère l'annee actuelle puis on vérifit que l'on est pas en l'an 1 :-) if(current_year == 1){ current_year = current_year; } else{ current_year = current_year - 1 ; } //et on appel la fonction de génération de calendrier CreateDivTempo('left'); //calendrier( current_year , current_month, current_day); }   //Fonction permettant de passer à l'annee suivante function annee_suivante(){ //Pas de limite pour l'ajout d'année current_year = current_year +1 ; //et on appel la fonction de génération de calendrier //calendrier( current_year , current_month, current_day); CreateDivTempo('right'); }   //Fonction permettant de passer au mois précédent function mois_precedent(){   //On récupère le mois actuel puis on vérifit que l'on est pas en janvier sinon on enlève une année if(current_month == 0){ current_month = 11; current_year = current_year - 1; } else{ current_month = current_month - 1 ; } //et on appel la fonction de génération de calendrier CreateDivTempo('left'); //calendrier( current_year , current_month, current_day); }   //Fonction permettant de passer au mois suivant function mois_suivant(){ //On récupère le mois actuel puis on vérifit que l'on est pas en janvier sinon on ajoute une année if(current_month == 11){ current_month = 0; current_year = current_year + 1; } else{ current_month = current_month + 1; } //et on appel la fonction de génération de calendrier //calendrier( current_year , current_month, current_day); CreateDivTempo('right'); }   //Fonction principale qui génère le calendrier //Elle prend en paramètre, l'année , le mois , et le jour //Si l'année et le mois ne sont pas renseignés , la date courante est affecté par défaut function calendrier(year, month, day){ //Aujourd'hui si month et year ne sont pas renseignés if(month == null || year == null){ today = new Date(); } else{ //month = month - 1; //Création d'une date en fonction de celle passée en paramètre today = new Date(year, month , day); }   //Mois actuel current_month = today.getMonth()   //Année actuelle current_year = today.getFullYear();   //Jours actuel current_day = today.getDate();     //######################## ENTETE ########################// //Ligne permettant de changer l'année et de mois var month_bef = "<a href=\"javascript:mois_precedent()\" style=\"position:absolute;left:30px;z-index:200;\" > < </a>"; var month_next = "<a href=\"javascript:mois_suivant()\" style=\"position:absolute;right:30px;z-index:200;\"> > </a>"; var year_next = "<a href=\"javascript:annee_suivante()\" style=\"position:absolute;right:5px;z-index:200;\" >&nbsp;&nbsp; > > </a>"; var year_bef = "<a href=\"javascript:annee_precedente()\" style=\"position:absolute;left:5px;z-index:200;\" > < < &nbsp;&nbsp;</a>"; calendrierSortie = "<p class=\"titleMonth\" style=\"position:relative;z-index:200;\"> <a href=\"javascript:alimenterChamps('')\" style=\"float:left;margin-left:3px;color:#cccccc;font-size:10px;z-index:200;\"> Effacer la date </a><a href=\"javascript:masquerCalendrier()\" style=\"float:right;margin-right:3px;color:red;font-weight:bold;font-size:12px;z-index:200;\">X</a>&nbsp;</p>"; //On affiche le mois et l'année en titre calendrierSortie += "<p class=\"titleMonth\" style=\"float:left;position:relative;z-index:200;\">" + year_next + year_bef+ month_bef + "<span id=\"curentDateString\">" + month_name[current_month]+ " "+ current_year +"</span>"+ month_next+"</p><div id=\"Contenant_Calendar\">"; //######################## FIN ENTETE ########################//   //Si aucun calendrier n'a encore été crée : if(!document.getElementById("calendrier")){ //On crée une div dynamiquement, en absolute, positionné sous le champs input div_calendar = document.createElement("div");   //On lui attribut un id div_calendar.setAttribute("id","calendrier");   //On définit les propriétés de cette div ( id et classe ) div_calendar.className = "calendar";   //Pour ajouter la div dans le document var mybody = document.getElementsByTagName("body")[0];   //Pour finir on ajoute la div dans le document mybody.appendChild(div_calendar); } else{ div_calendar = document.getElementById("calendrier"); }   //On insèrer dans la div, le contenu du calendrier généré //On assigne la taille du calendrier de façon dynamique ( on ajoute 10 px pour combler un bug sous ie ) var width_calendar = largeur+"px"; //Ajout des éléments dans le calendrier calendrierSortie = calendrierSortie + "</div><div class=\"separator\"></div>"; div_calendar.innerHTML = calendrierSortie; div_calendar.style.width = width_calendar; //On remplit le calendrier avec les jours // alert(CreateDayCalandar(year, month, day)); CreateDivTempo(''); }   function CreateDayCalandar(){   // On récupère le premier jour de la semaine du mois var dateTemp = new Date(current_year, current_month,1);   //test pour vérifier quel jour était le prmier du mois current_day_since_start_week = (( dateTemp.getDay()== 0 ) ? 6 : dateTemp.getDay() - 1);   //variable permettant de vérifier si l'on est déja rentré dans la condition pour éviter une boucle infinit var verifJour = false;   //On initialise le nombre de jour par mois var nbJoursfevrier = (current_year % 4) == 0 ? 29 : 28; //Initialisation du tableau indiquant le nombre de jours par mois var day_number = new Array(31,nbJoursfevrier,31,30,31,30,31,31,30,31,30,31);   var x = 0   //On initialise la ligne qui comportera tous les noms des jours depuis le début du mois var list_day = ''; var day_calendar = ''; //On remplit le calendrier avec le nombre de jour, en remplissant les premiers jours par des champs vides for(var nbjours = 0 ; nbjours < (day_number[current_month] + current_day_since_start_week) ; nbjours++){   // On boucle tous les 7 jours pour créer la ligne qui comportera le nom des jours en fonction des<br /> // paramètres d'affichage if(verifJour == false){ for(x = 0 ; x < 7 ; x++){ if(x == 6){ list_day += "<span>" + day_name[x] + "</span>"; } else{ list_day += "<span>" + day_name[x] + "</span>"; } } verifJour = true; } //et enfin on ajoute les dates au calendrier //Pour gèrer les jours "vide" et éviter de faire une boucle on vérifit que le nombre de jours corespond bien au //nombre de jour du mois if(nbjours < day_number[current_month]){ if(current_day == (nbjours+1)){ day_calendar += "<span onclick=\"alimenterChamps(this.innerHTML)\" class=\"currentDay DayDate\">" + (nbjours+1) + "</span>"; } else{ day_calendar += "<span class=\"DayDate\" onclick=\"alimenterChamps(this.innerHTML)\">" + (nbjours+1) + "</span>"; } } }   //On ajoute les jours "vide" du début du mois for(i = 0 ; i < current_day_since_start_week ; i ++){ day_calendar = "<span>&nbsp;</span>" + day_calendar; } //On met également a jour le mois et l'année $('curentDateString').innerHTML = month_name[current_month]+ " "+ current_year; return (list_day + day_calendar); }   function initialiserCalendrier(objetClick){ //on affecte la variable définissant sur quel input on a clické myObjectClick = objetClick;   if(myObjectClick.disabled != true){ //On vérifit que le champs n'est pas déja remplit, sinon on va se positionner sur la date du champs if(myObjectClick.value != ''){ //On utilise la chaine de separateur var reg=new RegExp("/", "g"); var dateDuChamps = myObjectClick.value; var tableau=dateDuChamps.split(reg); calendrier( tableau[2] , tableau[1] - 1 , tableau[0]); } else{ //on créer le calendrier calendrier(objetClick);     } //puis on le positionne par rapport a l'objet sur lequel on a clické //positionCalendar(objetClick); positionCalendar(objetClick); fadePic(); //masquerSelect(); createFrame(); }   }   //Fonction permettant de trouver la position de l'élément ( input ) pour pouvoir positioner le calendrier 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; }   //fonction permettant de positioner le calendrier function positionCalendar(objetParent){ //document.getElementById('calendrier').style.left = ds_getleft(objetParent) + "px"; document.getElementById('calendrier').style.left = ds_getleft(objetParent) + "px"; //document.getElementById('calendrier').style.top = ds_gettop(objetParent) + 20 + "px" ; document.getElementById('calendrier').style.top = ds_gettop(objetParent) + 20 + "px" ; // et on le rend visible document.getElementById('calendrier').style.visibility = "visible"; } //Fonction permettant d'alimenter le champs function alimenterChamps(daySelect){ if(daySelect != ''){ lastInput.value= formatInfZero(daySelect) + separateur + formatInfZero((current_month+1)) + separateur +current_year; } else{ lastInput.value = ''; } masquerCalendrier(); } function masquerCalendrier(){ fadePic(); //document.getElementById('calendrier').style.visibility = "hidden"; //montrerSelect(); }   function formatInfZero(numberFormat){ if(parseInt(numberFormat) < 10){ numberFormat = "0"+numberFormat; }   return numberFormat; }   function CreateSpan(){ var spanTemp = document.createElement("span"); spanTemp.className = ""; spanTemp.innerText = ""; spanTemp.onClick = ""; return spanTemp; }   //######################## FONCTION PERMETTANT D'AFFICHER LE CALENDRIER DE FA9ON PROGRESSIVE ########################// var max = 100; var min = 0; var opacite=min; up=true; var IsIE=!!document.all;     function fadePic(){ try{ var ThePic=document.getElementById("calendrier"); if (opacite < max && up){opacite+=5;} if (opacite>min && !up){opacite-=5;} IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("calendrier").style.opacity=opacite/100;   if(opacite<max && up){ timer = setTimeout('fadePic()',10); } else if(opacite>min && !up){ timer = setTimeout('fadePic()',10); } else{ if (opacite==max){up=false;} if (opacite<=min){up=true;} clearTimeout(timer); } } catch(error){ alert(error.message); } }   window.onload = init_evenement; </script>   <style type="text/css"> /* CSS Document */ .calendar{ background-color:#f7f6f3; position:absolute; font-family:Arial, Helvetica, sans-serif; font-size:12px; border:1px solid #0099cc; -moz-opacity:0; filter:alpha(opacity=0);   } .calendar a{ text-decoration:none; color:#ffffff; font-weight:bold; } .ListeDate{ background-color:#FFFFFF; } #Contenant_Calendar{ float:left; width:100%; overflow:hidden; position:relative; } #Contenant_Calendar span{ float:left; display:block; width:30px; height:30px; line-height:30px; text-align:center; } .DayDate:hover{ background-color:#8CD1EC; cursor:pointer; } #curentDateString{ width:100%; text-align:center; } .titleMonth{ width:100%; background-color:#08a1d4; color:#FFFFFF; text-align:center; border-bottom:1px solid #666; margin:0px; padding:0px; padding-bottom:2px; margin-top:0px; margin-bottom:0px; font-weight:bold; } .separator{ float:left; display:block; width:25px; } .currentDay{ font-weight:bold; background-color:#FFB0B0; }   </style> </head>   <body>   <input type="text" name="toto" class="calendrier" /><br /> <select> <option>voici une grande option pour voir le comportement</option> </select>   </body> </html>

---

Bonsoir,
Que dire d'autre que MERCI, :ave: t'es vraiment un champion :king:
Vraiment top cette nouvelle version, avec en plus de supers effets ....
A consommer sans modération ...
:lahola:

Il est pas beau mon fillot ??? :king: ^^

:red: me serais-je emballé trop tôt ?
chez moi sous IE le select passe au dessus :( ???

8O aurais tu un z-index sur ton select ??
j'ai effectué les tests sous ie 6/7 , firefox et je n'ai pas eu le problème

j'ai fait un pur et simple copier coller de ton code ...

8O8O8O version de ie ?? 6 ? ou 5.5 ??

IE 6.0.2800.1106

merdoum ... peux tu m'aider a débuguer , je n'ai pas ie6 sous la main je suis en régie

Je suis un peu overbooké tout de suite, mais j'y jetterais un oeil :

http://chat.developpez.com/uploaddir/calendar.gif

Problème résolu ;)

CODE FONCTIONEL , Testé ie6/7 firefox ( plusieurs pc cette fois ci )

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 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Calendrier V2</title> <script type="text/javascript">   var timer = null; var OldDiv = ""; var newFrame = null; var TimerRunning = false; // ## PARAMETRE D'AFFICHAGE du CALENDRIER ## // //si enLigne est a true , le calendrier s'affiche sur une seule ligne, //sinon il prend la taille spécifié par défaut;   var largeur = "210"; var separateur = "/";   /* ##################### CONFIGURATION ##################### */   /* ##- INITIALISATION DES VARIABLES -##*/ var calendrierSortie = ''; //Date actuelle var today = ''; //Mois actuel var current_month = ''; //Année actuelle var current_year = '' ; //Jours actuel var current_day = ''; //Nombres de jours depuis le début de la semaine var current_day_since_start_week = ''; //On initialise le nom des mois et le nom des jours en VF :) var month_name = new Array('Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre'); var day_name = new Array('L','M','M','J','V','S','D'); //permet de récupèrer l'input sur lequel on a clické et de le remplir avec la date formatée var myObjectClick = null; //Classe qui sera détecté pour afficher le calendrier var classMove = "calendrier"; //Variable permettant de savoir si on doit garder en mémoire le champs input clické var lastInput = null; //Div du calendrier var div_calendar = ""; var year, month, day = ""; /* ##################### FIN DE LA CONFIGURATION ##################### */   //########################## Fonction permettant de remplacer "document.getElementById" ########################## // function $(element){ return document.getElementById(element); }     //Permet de faire glisser une div de la gauche vers la droite function slideUp(bigMenu,smallMenu){ //Si le timer n'est pas finit on détruit l'ancienne div if(parseInt($(bigMenu).style.left) < 0){ $(bigMenu).style.left = parseInt($(bigMenu).style.left) + 10 + "px"; $(smallMenu).style.left =parseInt($(smallMenu).style.left) + 10 + "px"; timer = setTimeout('slideUp("'+bigMenu+'","'+smallMenu+'")',10); } else{ clearTimeout(timer); TimerRunning = false; $(smallMenu).parentNode.removeChild($(smallMenu)); //alert("timer up bien kill"); } }   //Permet de faire glisser une div de la droite vers la gauche function slideDown(bigMenu,smallMenu){ if(parseInt($(bigMenu).style.left) > 0){ $(bigMenu).style.left = parseInt($(bigMenu).style.left) - 10 + "px"; $(smallMenu).style.left =parseInt($(smallMenu).style.left) - 10 + "px"; timer = setTimeout('slideDown("'+bigMenu+'","'+smallMenu+'")',10); } else{ clearTimeout(timer); TimerRunning = false; //delete de l'ancienne $(smallMenu).parentNode.removeChild($(smallMenu)); //alert("timer down bien kill"); } }   //Création d'une nouvelle div contenant les jours du calendrier function CreateDivTempo(From){ if(!TimerRunning){ var DateTemp = new Date(); IdTemp = DateTemp.getMilliseconds(); var NewDiv = document.createElement('DIV'); NewDiv.style.position = "absolute"; NewDiv.style.top = "0px"; NewDiv.style.width = "100%"; NewDiv.className = "ListeDate"; NewDiv.id = IdTemp; //remplissage NewDiv.innerHTML = CreateDayCalandar(year, month, day);   $("Contenant_Calendar").appendChild(NewDiv);   if(From == "left"){ TimerRunning = true; NewDiv.style.left = "-"+largeur+"px"; slideUp(NewDiv.id,OldDiv); } else if(From == "right"){ TimerRunning = true; NewDiv.style.left = largeur+"px"; slideDown(NewDiv.id,OldDiv); } else{ ""; NewDiv.style.left = 0+"px"; } $('Contenant_Calendar').style.height = NewDiv.offsetHeight+"px"; $('Contenant_Calendar').style.zIndex = "200"; OldDiv = NewDiv.id; } }   //########################## FIN DES FONCTION LISTENER ########################## // /*Ajout du listener pour détecter le click sur l'élément et afficher le calendrier uniquement sur les textbox de class css date */   //Fonction permettant d'initialiser les listeners function init_evenement(){ //On commence par affecter une fonction à chaque évènement de la souris if(window.attachEvent){ document.onmousedown = start; document.onmouseup = drop; } else{ document.addEventListener("mousedown",start, false); document.addEventListener("mouseup",drop, false); } } //Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe function start(e){ //On initialise l'évènement s'il n'a aps été créé ( sous ie ) if(!e){ e = window.event; } //Détection de l'élément sur lequel on a clické var monElement = null; monElement = (e.target)? e.target:e.srcElement; if(monElement != null && monElement) { //On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables getClassDrag(monElement);   if(myObjectClick){ initialiserCalendrier(monElement); lastInput = myObjectClick; } } } function drop(){ myObjectClick = null; } //########################## Fonction permettant de récupèrer la liste des classes d'un objet ##########################// function getClassDrag(myObject){ with(myObject){ var x = className; listeClass = x.split(" "); //On parcours le tableau pour voir si l'objet est de type calendrier for(var i = 0 ; i < listeClass.length ; i++){ if(listeClass[i] == classMove){ myObjectClick = myObject; break; } } } }   //########################## Pour combler un bug d'ie 6 on masque les select ########################## // function masquerSelect(){ var ua = navigator.userAgent.toLowerCase(); var versionNav = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) ); var isIE = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) );   if(isIE && (versionNav < 7)){ svn=document.getElementsByTagName("SELECT"); for (a=0;a<svn.length;a++){ svn[a].style.visibility="hidden"; } } }   function montrerSelect(){ var ua = navigator.userAgent.toLowerCase(); var versionNav = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) ); var isIE = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) ); if(isIE && versionNav < 7){ svn=document.getElementsByTagName("SELECT"); for (a=0;a<svn.length;a++){ svn[a].style.visibility="visible"; } } }   function createFrame(){ newFrame = document.createElement('iframe'); newFrame.style.width = largeur+"px"; newFrame.style.height = div_calendar.offsetHeight-10+"px"; newFrame.style.zIndex = "0"; newFrame.frameBorder="0"; newFrame.style.position = "absolute"; newFrame.style.display = "block"; //newFrame.style.opacity = 0 ; //newFrame.filters.alpha.opacity = 0 ; newFrame.style.top = 0 +"px"; newFrame.style.left = 0+"px"; div_calendar.appendChild(newFrame); }   //######################## FONCTIONS PROPRE AU CALENDRIER ########################## // //Fonction permettant de passer a l'annee précédente function annee_precedente(){   //On récupère l'annee actuelle puis on vérifit que l'on est pas en l'an 1 :-) if(current_year == 1){ current_year = current_year; } else{ current_year = current_year - 1 ; } //et on appel la fonction de génération de calendrier CreateDivTempo('left'); //calendrier( current_year , current_month, current_day); }   //Fonction permettant de passer à l'annee suivante function annee_suivante(){ //Pas de limite pour l'ajout d'année current_year = current_year +1 ; //et on appel la fonction de génération de calendrier //calendrier( current_year , current_month, current_day); CreateDivTempo('right'); }   //Fonction permettant de passer au mois précédent function mois_precedent(){   //On récupère le mois actuel puis on vérifit que l'on est pas en janvier sinon on enlève une année if(current_month == 0){ current_month = 11; current_year = current_year - 1; } else{ current_month = current_month - 1 ; } //et on appel la fonction de génération de calendrier CreateDivTempo('left'); //calendrier( current_year , current_month, current_day); }   //Fonction permettant de passer au mois suivant function mois_suivant(){ //On récupère le mois actuel puis on vérifit que l'on est pas en janvier sinon on ajoute une année if(current_month == 11){ current_month = 0; current_year = current_year + 1; } else{ current_month = current_month + 1; } //et on appel la fonction de génération de calendrier //calendrier( current_year , current_month, current_day); CreateDivTempo('right'); }   //Fonction principale qui génère le calendrier //Elle prend en paramètre, l'année , le mois , et le jour //Si l'année et le mois ne sont pas renseignés , la date courante est affecté par défaut function calendrier(year, month, day){ //Aujourd'hui si month et year ne sont pas renseignés if(month == null || year == null){ today = new Date(); } else{ //month = month - 1; //Création d'une date en fonction de celle passée en paramètre today = new Date(year, month , day); }   //Mois actuel current_month = today.getMonth()   //Année actuelle current_year = today.getFullYear();   //Jours actuel current_day = today.getDate();     //######################## ENTETE ########################// //Ligne permettant de changer l'année et de mois var month_bef = "<a href=\"javascript:mois_precedent()\" style=\"position:absolute;left:30px;z-index:200;\" > < </a>"; var month_next = "<a href=\"javascript:mois_suivant()\" style=\"position:absolute;right:30px;z-index:200;\"> > </a>"; var year_next = "<a href=\"javascript:annee_suivante()\" style=\"position:absolute;right:5px;z-index:200;\" >&nbsp;&nbsp; > > </a>"; var year_bef = "<a href=\"javascript:annee_precedente()\" style=\"position:absolute;left:5px;z-index:200;\" > < < &nbsp;&nbsp;</a>"; calendrierSortie = "<p class=\"titleMonth\" style=\"position:relative;z-index:200;\"> <a href=\"javascript:alimenterChamps('')\" style=\"float:left;margin-left:3px;color:#cccccc;font-size:10px;z-index:200;\"> Effacer la date </a><a href=\"javascript:masquerCalendrier()\" style=\"float:right;margin-right:3px;color:red;font-weight:bold;font-size:12px;z-index:200;\">X</a>&nbsp;</p>"; //On affiche le mois et l'année en titre calendrierSortie += "<p class=\"titleMonth\" style=\"float:left;position:relative;z-index:200;\">" + year_next + year_bef+ month_bef + "<span id=\"curentDateString\">" + month_name[current_month]+ " "+ current_year +"</span>"+ month_next+"</p><div id=\"Contenant_Calendar\">"; //######################## FIN ENTETE ########################//   //Si aucun calendrier n'a encore été crée : if(!document.getElementById("calendrier")){ //On crée une div dynamiquement, en absolute, positionné sous le champs input div_calendar = document.createElement("div");   //On lui attribut un id div_calendar.setAttribute("id","calendrier");   //On définit les propriétés de cette div ( id et classe ) div_calendar.className = "calendar";   //Pour ajouter la div dans le document var mybody = document.getElementsByTagName("body")[0];   //Pour finir on ajoute la div dans le document mybody.appendChild(div_calendar); } else{ div_calendar = document.getElementById("calendrier"); }   //On insèrer dans la div, le contenu du calendrier généré //On assigne la taille du calendrier de façon dynamique ( on ajoute 10 px pour combler un bug sous ie ) var width_calendar = largeur+"px"; //Ajout des éléments dans le calendrier calendrierSortie = calendrierSortie + "</div><div class=\"separator\"></div>"; div_calendar.innerHTML = calendrierSortie; div_calendar.style.width = width_calendar; //On remplit le calendrier avec les jours // alert(CreateDayCalandar(year, month, day)); CreateDivTempo(''); }   function CreateDayCalandar(){   // On récupère le premier jour de la semaine du mois var dateTemp = new Date(current_year, current_month,1);   //test pour vérifier quel jour était le prmier du mois current_day_since_start_week = (( dateTemp.getDay()== 0 ) ? 6 : dateTemp.getDay() - 1);   //variable permettant de vérifier si l'on est déja rentré dans la condition pour éviter une boucle infinit var verifJour = false;   //On initialise le nombre de jour par mois var nbJoursfevrier = (current_year % 4) == 0 ? 29 : 28; //Initialisation du tableau indiquant le nombre de jours par mois var day_number = new Array(31,nbJoursfevrier,31,30,31,30,31,31,30,31,30,31);   var x = 0   //On initialise la ligne qui comportera tous les noms des jours depuis le début du mois var list_day = ''; var day_calendar = ''; //On remplit le calendrier avec le nombre de jour, en remplissant les premiers jours par des champs vides for(var nbjours = 0 ; nbjours < (day_number[current_month] + current_day_since_start_week) ; nbjours++){   // On boucle tous les 7 jours pour créer la ligne qui comportera le nom des jours en fonction des<br /> // paramètres d'affichage if(verifJour == false){ for(x = 0 ; x < 7 ; x++){ if(x == 6){ list_day += "<span>" + day_name[x] + "</span>"; } else{ list_day += "<span>" + day_name[x] + "</span>"; } } verifJour = true; } //et enfin on ajoute les dates au calendrier //Pour gèrer les jours "vide" et éviter de faire une boucle on vérifit que le nombre de jours corespond bien au //nombre de jour du mois if(nbjours < day_number[current_month]){ if(current_day == (nbjours+1)){ day_calendar += "<span onclick=\"alimenterChamps(this.innerHTML)\" class=\"currentDay DayDate\">" + (nbjours+1) + "</span>"; } else{ day_calendar += "<span class=\"DayDate\" onclick=\"alimenterChamps(this.innerHTML)\">" + (nbjours+1) + "</span>"; } } }   //On ajoute les jours "vide" du début du mois for(i = 0 ; i < current_day_since_start_week ; i ++){ day_calendar = "<span>&nbsp;</span>" + day_calendar; } //On met également a jour le mois et l'année $('curentDateString').innerHTML = month_name[current_month]+ " "+ current_year; return (list_day + day_calendar); }   function initialiserCalendrier(objetClick){ //on affecte la variable définissant sur quel input on a clické myObjectClick = objetClick;   if(myObjectClick.disabled != true){ //On vérifit que le champs n'est pas déja remplit, sinon on va se positionner sur la date du champs if(myObjectClick.value != ''){ //On utilise la chaine de separateur var reg=new RegExp("/", "g"); var dateDuChamps = myObjectClick.value; var tableau=dateDuChamps.split(reg); calendrier( tableau[2] , tableau[1] - 1 , tableau[0]); } else{ //on créer le calendrier calendrier(objetClick);     } //puis on le positionne par rapport a l'objet sur lequel on a clické //positionCalendar(objetClick); positionCalendar(objetClick); fadePic(); //masquerSelect(); createFrame(); }   }   //Fonction permettant de trouver la position de l'élément ( input ) pour pouvoir positioner le calendrier 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; }   //fonction permettant de positioner le calendrier function positionCalendar(objetParent){ //document.getElementById('calendrier').style.left = ds_getleft(objetParent) + "px"; document.getElementById('calendrier').style.left = ds_getleft(objetParent) + "px"; //document.getElementById('calendrier').style.top = ds_gettop(objetParent) + 20 + "px" ; document.getElementById('calendrier').style.top = ds_gettop(objetParent) + 20 + "px" ; // et on le rend visible document.getElementById('calendrier').style.visibility = "visible"; } //Fonction permettant d'alimenter le champs function alimenterChamps(daySelect){ if(daySelect != ''){ lastInput.value= formatInfZero(daySelect) + separateur + formatInfZero((current_month+1)) + separateur +current_year; } else{ lastInput.value = ''; } masquerCalendrier(); } function masquerCalendrier(){ fadePic(); //On Masque la frame /!\ newFrame.style.display = "none"; //document.getElementById('calendrier').style.visibility = "hidden"; //montrerSelect(); }   function formatInfZero(numberFormat){ if(parseInt(numberFormat) < 10){ numberFormat = "0"+numberFormat; }   return numberFormat; }   function CreateSpan(){ var spanTemp = document.createElement("span"); spanTemp.className = ""; spanTemp.innerText = ""; spanTemp.onClick = ""; return spanTemp; }   //######################## FONCTION PERMETTANT DE VERIFIER UNE DATE SAISI PAR L'UTILISATEUR ########################// function CheckDate(d) { // Format de la date : JJ/MM/AAAA . var j=(d.substring(0,2)); var m=(d.substring(3,5)); var a=(d.substring(6)); var regA = new RegExp("[0-9]{4}"); alert(regA.test(a)); if ( ((isNaN(j))||(j<1)||(j>31))) { return false; }   if ( ((isNaN(m))||(m<1)||(m>12))) { return false; }   if ((isNaN(a))||(regA.test(a))) { return false; } return true; } //######################## FONCTION PERMETTANT D'AFFICHER LE CALENDRIER DE FA9ON PROGRESSIVE ########################// var max = 100; var min = 0; var opacite=min; up=true; var IsIE=!!document.all;     function fadePic(){ try{ var ThePic=document.getElementById("calendrier"); if (opacite < max && up){opacite+=5;} if (opacite>min && !up){opacite-=5;} IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("calendrier").style.opacity=opacite/100;   if(opacite<max && up){ timer = setTimeout('fadePic()',10); } else if(opacite>min && !up){ timer = setTimeout('fadePic()',10); } else{ if (opacite==max){up=false;} if (opacite<=min){up=true;} clearTimeout(timer); } } catch(error){ alert(error.message); } }   window.onload = init_evenement; </script>   <style type="text/css"> /* CSS Document */ .calendar{ background-color:#f7f6f3; position:absolute; font-family:Arial, Helvetica, sans-serif; font-size:12px; border:1px solid #0099cc; -moz-opacity:0; filter:alpha(opacity=0);   } .calendar a{ text-decoration:none; color:#ffffff; font-weight:bold; } .ListeDate{ background-color:#FFFFFF; } #Contenant_Calendar{ float:left; width:100%; overflow:hidden; position:relative; } #Contenant_Calendar span{ float:left; display:block; width:30px; height:30px; line-height:30px; text-align:center; } .DayDate:hover{ background-color:#8CD1EC; cursor:pointer; } #curentDateString{ width:100%; text-align:center; } .titleMonth{ width:100%; background-color:#08a1d4; color:#FFFFFF; text-align:center; border-bottom:1px solid #666; margin:0px; padding:0px; padding-bottom:2px; margin-top:0px; margin-bottom:0px; font-weight:bold; } .separator{ float:left; display:block; width:25px; } .currentDay{ font-weight:bold; background-color:#FFB0B0; }   </style> </head>   <body>   <input type="text" name="toto" class="calendrier" /><br /> <select> <option>voici une grande option pour voir le comportement</option> </select>   </body> </html>

---

:king:

juste une toute petit remarque sur l'ergonomie :

les boutons mois suivant et année suivantes ne sont pas assez différenciables ...

peut être en mettant par exemple une couleur différente ?


genre les << et >> dasn une couleur .... et l'année 2008 de la même couleur
et le < et > d'une autre couleur ... et le mois Mars de la même couleur ...


<< < Mars 2008 > >>

simple suggestion !




Et puis un style cursor:pointer sur les dates ...
Et enfin reste à travailler sur les dates grisées ...


sinon respect pour le travail !

Bonjour,
Un petit UP suite un à petit bug.
En effet si je positionne des <input type="text"> en dessous de mon champs de saisie de date ayant la class=calendrier, je ne peux plus rien saisir d'en ceux-ci si j'ai rempli mon champs date.

Sinon la solution à mon premier problème de décalage a été donné ici par marts ...;)

yop bug signalé , je ne sais plus si c'est à toi jumano , mais le bug viens de l'iframe qui ne disparait pas totalement, je dois résoudre ça dès que j'ai un peu de temps :)

Ok merci ... :king:

Voila c'est corrigé ^^

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 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Calendrier V2</title> <script type="text/javascript">   var timer = null; var OldDiv = ""; var newFrame = null; var TimerRunning = false; // ## PARAMETRE D'AFFICHAGE du CALENDRIER ## // //si enLigne est a true , le calendrier s'affiche sur une seule ligne, //sinon il prend la taille spécifié par défaut;   var largeur = "210"; var separateur = "/";   /* ##################### CONFIGURATION ##################### */   /* ##- INITIALISATION DES VARIABLES -##*/ var calendrierSortie = ''; //Date actuelle var today = ''; //Mois actuel var current_month = ''; //Année actuelle var current_year = '' ; //Jours actuel var current_day = ''; //Nombres de jours depuis le début de la semaine var current_day_since_start_week = ''; //On initialise le nom des mois et le nom des jours en VF :) var month_name = new Array('Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre'); var day_name = new Array('L','M','M','J','V','S','D'); //permet de récupèrer l'input sur lequel on a clické et de le remplir avec la date formatée var myObjectClick = null; //Classe qui sera détecté pour afficher le calendrier var classMove = "calendrier"; //Variable permettant de savoir si on doit garder en mémoire le champs input clické var lastInput = null; //Div du calendrier var div_calendar = ""; var year, month, day = ""; /* ##################### FIN DE LA CONFIGURATION ##################### */   //########################## Fonction permettant de remplacer "document.getElementById" ########################## // function $(element){ return document.getElementById(element); }     //Permet de faire glisser une div de la gauche vers la droite function slideUp(bigMenu,smallMenu){ //Si le timer n'est pas finit on détruit l'ancienne div if(parseInt($(bigMenu).style.left) < 0){ $(bigMenu).style.left = parseInt($(bigMenu).style.left) + 10 + "px"; $(smallMenu).style.left =parseInt($(smallMenu).style.left) + 10 + "px"; timer = setTimeout('slideUp("'+bigMenu+'","'+smallMenu+'")',10); } else{ clearTimeout(timer); TimerRunning = false; $(smallMenu).parentNode.removeChild($(smallMenu)); //alert("timer up bien kill"); } }   //Permet de faire glisser une div de la droite vers la gauche function slideDown(bigMenu,smallMenu){ if(parseInt($(bigMenu).style.left) > 0){ $(bigMenu).style.left = parseInt($(bigMenu).style.left) - 10 + "px"; $(smallMenu).style.left =parseInt($(smallMenu).style.left) - 10 + "px"; timer = setTimeout('slideDown("'+bigMenu+'","'+smallMenu+'")',10); } else{ clearTimeout(timer); TimerRunning = false; //delete de l'ancienne $(smallMenu).parentNode.removeChild($(smallMenu)); //alert("timer down bien kill"); } }   //Création d'une nouvelle div contenant les jours du calendrier function CreateDivTempo(From){ if(!TimerRunning){ var DateTemp = new Date(); IdTemp = DateTemp.getMilliseconds(); var NewDiv = document.createElement('DIV'); NewDiv.style.position = "absolute"; NewDiv.style.top = "0px"; NewDiv.style.width = "100%"; NewDiv.className = "ListeDate"; NewDiv.id = IdTemp; //remplissage NewDiv.innerHTML = CreateDayCalandar(year, month, day);   $("Contenant_Calendar").appendChild(NewDiv);   if(From == "left"){ TimerRunning = true; NewDiv.style.left = "-"+largeur+"px"; slideUp(NewDiv.id,OldDiv); } else if(From == "right"){ TimerRunning = true; NewDiv.style.left = largeur+"px"; slideDown(NewDiv.id,OldDiv); } else{ ""; NewDiv.style.left = 0+"px"; } $('Contenant_Calendar').style.height = NewDiv.offsetHeight+"px"; $('Contenant_Calendar').style.zIndex = "200"; OldDiv = NewDiv.id; } }   //########################## FIN DES FONCTION LISTENER ########################## // /*Ajout du listener pour détecter le click sur l'élément et afficher le calendrier uniquement sur les textbox de class css date */   //Fonction permettant d'initialiser les listeners function init_evenement(){ //On commence par affecter une fonction à chaque évènement de la souris if(window.attachEvent){ document.onmousedown = start; document.onmouseup = drop; } else{ document.addEventListener("mousedown",start, false); document.addEventListener("mouseup",drop, false); } } //Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe function start(e){ //On initialise l'évènement s'il n'a aps été créé ( sous ie ) if(!e){ e = window.event; } //Détection de l'élément sur lequel on a clické var monElement = null; monElement = (e.target)? e.target:e.srcElement; if(monElement != null && monElement) { //On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables getClassDrag(monElement);   if(myObjectClick){ initialiserCalendrier(monElement); lastInput = myObjectClick; } } } function drop(){ myObjectClick = null; } //########################## Fonction permettant de récupèrer la liste des classes d'un objet ##########################// function getClassDrag(myObject){ with(myObject){ var x = className; listeClass = x.split(" "); //On parcours le tableau pour voir si l'objet est de type calendrier for(var i = 0 ; i < listeClass.length ; i++){ if(listeClass[i] == classMove){ myObjectClick = myObject; break; } } } }   //########################## Pour combler un bug d'ie 6 on masque les select ########################## // function masquerSelect(){ var ua = navigator.userAgent.toLowerCase(); var versionNav = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) ); var isIE = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) );   if(isIE && (versionNav < 7)){ svn=document.getElementsByTagName("SELECT"); for (a=0;a<svn.length;a++){ svn[a].style.visibility="hidden"; } } }   function montrerSelect(){ var ua = navigator.userAgent.toLowerCase(); var versionNav = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) ); var isIE = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) ); if(isIE && versionNav < 7){ svn=document.getElementsByTagName("SELECT"); for (a=0;a<svn.length;a++){ svn[a].style.visibility="visible"; } } }   function createFrame(){ newFrame = document.createElement('iframe'); newFrame.style.width = largeur+"px"; newFrame.style.height = div_calendar.offsetHeight-2+"px"; newFrame.style.zIndex = "0"; newFrame.frameBorder="0"; newFrame.style.position = "absolute"; newFrame.style.display = "block"; //newFrame.style.opacity = 0 ; //newFrame.filters.alpha.opacity = 0 ; newFrame.style.top = 0 +"px"; newFrame.style.left = 0+"px"; div_calendar.appendChild(newFrame); }   //######################## FONCTIONS PROPRE AU CALENDRIER ########################## // //Fonction permettant de passer a l'annee précédente function annee_precedente(){   //On récupère l'annee actuelle puis on vérifit que l'on est pas en l'an 1 :-) if(current_year == 1){ current_year = current_year; } else{ current_year = current_year - 1 ; } //et on appel la fonction de génération de calendrier CreateDivTempo('left'); //calendrier( current_year , current_month, current_day); }   //Fonction permettant de passer à l'annee suivante function annee_suivante(){ //Pas de limite pour l'ajout d'année current_year = current_year +1 ; //et on appel la fonction de génération de calendrier //calendrier( current_year , current_month, current_day); CreateDivTempo('right'); }   //Fonction permettant de passer au mois précédent function mois_precedent(){   //On récupère le mois actuel puis on vérifit que l'on est pas en janvier sinon on enlève une année if(current_month == 0){ current_month = 11; current_year = current_year - 1; } else{ current_month = current_month - 1 ; } //et on appel la fonction de génération de calendrier CreateDivTempo('left'); //calendrier( current_year , current_month, current_day); }   //Fonction permettant de passer au mois suivant function mois_suivant(){ //On récupère le mois actuel puis on vérifit que l'on est pas en janvier sinon on ajoute une année if(current_month == 11){ current_month = 0; current_year = current_year + 1; } else{ current_month = current_month + 1; } //et on appel la fonction de génération de calendrier //calendrier( current_year , current_month, current_day); CreateDivTempo('right'); }   //Fonction principale qui génère le calendrier //Elle prend en paramètre, l'année , le mois , et le jour //Si l'année et le mois ne sont pas renseignés , la date courante est affecté par défaut function calendrier(year, month, day){ //Aujourd'hui si month et year ne sont pas renseignés if(month == null || year == null){ today = new Date(); } else{ //month = month - 1; //Création d'une date en fonction de celle passée en paramètre today = new Date(year, month , day); }   //Mois actuel current_month = today.getMonth()   //Année actuelle current_year = today.getFullYear();   //Jours actuel current_day = today.getDate();     //######################## ENTETE ########################// //Ligne permettant de changer l'année et de mois var month_bef = "<a href=\"javascript:mois_precedent()\" style=\"position:absolute;left:30px;z-index:200;color:#cccccc;\" > < </a>"; var month_next = "<a href=\"javascript:mois_suivant()\" style=\"position:absolute;right:30px;z-index:200;color:#cccccc\"> > </a>"; var year_next = "<a href=\"javascript:annee_suivante()\" style=\"position:absolute;right:5px;z-index:200;\" >&nbsp;&nbsp; > > </a>"; var year_bef = "<a href=\"javascript:annee_precedente()\" style=\"position:absolute;left:5px;z-index:200;\" > < < &nbsp;&nbsp;</a>"; calendrierSortie = "<p class=\"titleMonth\" style=\"position:relative;z-index:200;\"> <a href=\"javascript:alimenterChamps('')\" style=\"float:left;margin-left:3px;color:#cccccc;font-size:10px;z-index:200;\"> Effacer la date </a><a href=\"javascript:masquerCalendrier()\" style=\"float:right;margin-right:3px;color:red;font-weight:bold;font-size:12px;z-index:200;\">X</a>&nbsp;</p>"; //On affiche le mois et l'année en titre calendrierSortie += "<p class=\"titleMonth\" style=\"float:left;position:relative;z-index:200;\">" + year_next + year_bef+ month_bef + "<span id=\"curentDateString\">" + month_name[current_month]+ " "+ current_year +"</span>"+ month_next+"</p><div id=\"Contenant_Calendar\">"; //######################## FIN ENTETE ########################//   //Si aucun calendrier n'a encore été crée : if(!document.getElementById("calendrier")){ //On crée une div dynamiquement, en absolute, positionné sous le champs input div_calendar = document.createElement("div");   //On lui attribut un id div_calendar.setAttribute("id","calendrier");   //On définit les propriétés de cette div ( id et classe ) div_calendar.className = "calendar";   //Pour ajouter la div dans le document var mybody = document.getElementsByTagName("body")[0];   //Pour finir on ajoute la div dans le document mybody.appendChild(div_calendar); } else{ div_calendar = document.getElementById("calendrier"); }   //On insèrer dans la div, le contenu du calendrier généré //On assigne la taille du calendrier de façon dynamique ( on ajoute 10 px pour combler un bug sous ie ) var width_calendar = largeur+"px"; //Ajout des éléments dans le calendrier calendrierSortie = calendrierSortie + "</div><div class=\"separator\"></div>"; div_calendar.innerHTML = calendrierSortie; div_calendar.style.width = width_calendar; //On remplit le calendrier avec les jours // alert(CreateDayCalandar(year, month, day)); CreateDivTempo(''); }   function CreateDayCalandar(){   // On récupère le premier jour de la semaine du mois var dateTemp = new Date(current_year, current_month,1);   //test pour vérifier quel jour était le prmier du mois current_day_since_start_week = (( dateTemp.getDay()== 0 ) ? 6 : dateTemp.getDay() - 1);   //variable permettant de vérifier si l'on est déja rentré dans la condition pour éviter une boucle infinit var verifJour = false;   //On initialise le nombre de jour par mois var nbJoursfevrier = (current_year % 4) == 0 ? 29 : 28; //Initialisation du tableau indiquant le nombre de jours par mois var day_number = new Array(31,nbJoursfevrier,31,30,31,30,31,31,30,31,30,31);   var x = 0   //On initialise la ligne qui comportera tous les noms des jours depuis le début du mois var list_day = ''; var day_calendar = ''; //On remplit le calendrier avec le nombre de jour, en remplissant les premiers jours par des champs vides for(var nbjours = 0 ; nbjours < (day_number[current_month] + current_day_since_start_week) ; nbjours++){   // On boucle tous les 7 jours pour créer la ligne qui comportera le nom des jours en fonction des<br /> // paramètres d'affichage if(verifJour == false){ for(x = 0 ; x < 7 ; x++){ if(x == 6){ list_day += "<span>" + day_name[x] + "</span>"; } else{ list_day += "<span>" + day_name[x] + "</span>"; } } verifJour = true; } //et enfin on ajoute les dates au calendrier //Pour gèrer les jours "vide" et éviter de faire une boucle on vérifit que le nombre de jours corespond bien au //nombre de jour du mois if(nbjours < day_number[current_month]){ if(current_day == (nbjours+1)){ day_calendar += "<span onclick=\"alimenterChamps(this.innerHTML)\" class=\"currentDay DayDate\">" + (nbjours+1) + "</span>"; } else{ day_calendar += "<span class=\"DayDate\" onclick=\"alimenterChamps(this.innerHTML)\">" + (nbjours+1) + "</span>"; } } }   //On ajoute les jours "vide" du début du mois for(i = 0 ; i < current_day_since_start_week ; i ++){ day_calendar = "<span>&nbsp;</span>" + day_calendar; } //On met également a jour le mois et l'année $('curentDateString').innerHTML = month_name[current_month]+ " "+ current_year; return (list_day + day_calendar); }   function initialiserCalendrier(objetClick){ //on affecte la variable définissant sur quel input on a clické myObjectClick = objetClick;   if(myObjectClick.disabled != true){ //On vérifit que le champs n'est pas déja remplit, sinon on va se positionner sur la date du champs if(myObjectClick.value != ''){ //On utilise la chaine de separateur var reg=new RegExp("/", "g"); var dateDuChamps = myObjectClick.value; var tableau=dateDuChamps.split(reg); calendrier( tableau[2] , tableau[1] - 1 , tableau[0]); } else{ //on créer le calendrier calendrier(objetClick);     } //puis on le positionne par rapport a l'objet sur lequel on a clické //positionCalendar(objetClick); positionCalendar(objetClick); fadePic(); //masquerSelect(); createFrame(); }   }   //Fonction permettant de trouver la position de l'élément ( input ) pour pouvoir positioner le calendrier 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; }   //fonction permettant de positioner le calendrier function positionCalendar(objetParent){ //document.getElementById('calendrier').style.left = ds_getleft(objetParent) + "px"; document.getElementById('calendrier').style.left = ds_getleft(objetParent) + "px"; //document.getElementById('calendrier').style.top = ds_gettop(objetParent) + 20 + "px" ; document.getElementById('calendrier').style.top = ds_gettop(objetParent) + 20 + "px" ; // et on le rend visible document.getElementById('calendrier').style.visibility = "visible"; } //Fonction permettant d'alimenter le champs function alimenterChamps(daySelect){ if(daySelect != ''){ lastInput.value= formatInfZero(daySelect) + separateur + formatInfZero((current_month+1)) + separateur +current_year; } else{ lastInput.value = ''; } masquerCalendrier(); } function masquerCalendrier(){ //On détruit la frame document.getElementById('calendrier').removeChild(newFrame); //Puis on efface le calendrier fadePic(); }   function formatInfZero(numberFormat){ if(parseInt(numberFormat) < 10){ numberFormat = "0"+numberFormat; }   return numberFormat; }   function CreateSpan(){ var spanTemp = document.createElement("span"); spanTemp.className = ""; spanTemp.innerText = ""; spanTemp.onClick = ""; return spanTemp; }   //######################## FONCTION PERMETTANT DE VERIFIER UNE DATE SAISI PAR L'UTILISATEUR ########################// function CheckDate(d) { // Format de la date : JJ/MM/AAAA . var j=(d.substring(0,2)); var m=(d.substring(3,5)); var a=(d.substring(6)); var regA = new RegExp("[0-9]{4}"); alert(regA.test(a)); if ( ((isNaN(j))||(j<1)||(j>31))) { return false; }   if ( ((isNaN(m))||(m<1)||(m>12))) { return false; }   if ((isNaN(a))||(regA.test(a))) { return false; } return true; } //######################## FONCTION PERMETTANT D'AFFICHER LE CALENDRIER DE FA9ON PROGRESSIVE ########################// var max = 100; var min = 0; var opacite=min; up=true; var IsIE=!!document.all;     function fadePic(){ try{ var ThePic=document.getElementById("calendrier"); if (opacite < max && up){opacite+=10;} if (opacite>min && !up){opacite-=10;} IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("calendrier").style.opacity=opacite/100;   if(opacite<max && up){ timer = setTimeout('fadePic()',10); } else if(opacite>min && !up){ timer = setTimeout('fadePic()',10); } else{ if (opacite==max){up=false;} if (opacite<=min){up=true;var mybody = document.getElementsByTagName("body")[0];mybody.removeChild(document.getElementById("calendrier"));} clearTimeout(timer); } } catch(error){ alert(error.message); } }   window.onload = init_evenement; </script>   <style type="text/css"> /* CSS Document */ .calendar{ background-color:#f7f6f3; position:absolute; font-family:Arial, Helvetica, sans-serif; font-size:12px; border:1px solid #0099cc; -moz-opacity:0; filter:alpha(opacity=0);   } .calendar a{ text-decoration:none; color:#ffffff; font-weight:bold; } .ListeDate{ background-color:#FFFFFF; } #Contenant_Calendar{ float:left; width:100%; overflow:hidden; position:relative; } #Contenant_Calendar span{ float:left; display:block; width:30px; height:30px; line-height:30px; text-align:center; } .DayDate:hover{ background-color:#8CD1EC; cursor:pointer; } #curentDateString{ width:100%; text-align:center; } .titleMonth{ width:100%; background-color:#08a1d4; color:#FFFFFF; text-align:center; border-bottom:1px solid #666; margin:0px; padding:0px; padding-bottom:2px; margin-top:0px; margin-bottom:0px; font-weight:bold; } .separator{ float:left; display:block; width:25px; } .currentDay{ font-weight:bold; background-color:#FFB0B0; }   </style> </head>   <body>   <input type="text" name="toto" class="calendrier" /><br /> <select> <option>voici une grande option pour voir le comportement</option> </select>   </body> </html>

---

Impec :king: :lahola:

sacré boulot
chapeau !!!
:king:

bonjour,

Comment modifier ce calendrier? (qui fonctionne très bien :king: )
pour pouvoir entrer une heure aussi

et que dans mon input apparaisse:
JJ-MM-AAAA HH:MM:SS


Merci de votre aide

tu peux modifier la méthode qui alimente le champs ( en bidouillant rapidement ça donne ceci ) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

//Fonction permettant d'alimenter le champs function alimenterChamps(daySelect){ if(daySelect != ''){ //Création d'une nouvelle date juste pour l'heure var DateTempo = new Date(); var heureTempo = DateTempo.getHours()+":"+DateTempo.getMinutes()+":"+getSeconds(); lastInput.value= formatInfZero(daySelect) + separateur + formatInfZero((current_month+1)) + separateur +current_year + " " + heureTempo; } else{ lastInput.value = ''; } masquerCalendrier(); }

---

je n'ai pas testé mais ça devrait marcher :)

il y a pas moyen de mettre un champs dans le calendrier où l'utilisateur encodera l'heure lui même ou choisira l'heure via des listes déroulantes ou autres?

si :mouarf:
mais la je n'ai pas le temps de le faire je suis sur autre chose ;)

mais si tu as un peu de temps fais toi plaisir :)

Salut,

J'ai un gros problème avec un de mes sites.
j'ai inséré un calendrier dans mon formulaire mais il empêche le champ d'en dessous de recevoir sa valeur. Ce sont des boutons radios qui ne fonctionnent plus une fois ma date choisie dans le calendrier mais quand je fais l'inverse, cad quand je selectionne un de mes boutons radios avant de choisir ma date cela fonctionne.
bref, mes connaissances en form ne sont pas assez poussé pour voir d'où vient le problème...qqun peut m'aider svp?

bonjour Tania et bienvenue sur Developpez.net :)

je te conseille vivement d'utiliser la nouvelle version du calendrier que tu trouveras ici :

http://www.developpez.net/forums/d64...s-mieux-mieux/

une démo :

http://easynews.free.fr/calendrierv2/

Sinon , montre moi ta page :)

Salut à tous,

Je me permet de déterrer ce topic vieux de 2 ans, car personne n'a donné la réponse à la question d'origine de Jumano.
J'utilise aussi ce calendrier. Il est implanté sur tout mon site, je l'ai pas mal personnalisé, et ca m'embête de changer pour un autre.
Le seul problème est celui décrit par Jumano, à savoir que les mois de 30 jours ne commencent pas au bon jour de la semaine, un jeudi au lieu d'un mardi par exemple.
J'ajoute que ce bug ne se produit apparement que le 31 du mois précédent. Par exemple hier, nous etions le 31 mai, mon calendrier affichait jeudi 1er juin au lieu de mardi (et tous les mois de 30 jours etaient faux, donc avril, juin, septembre et novembre). Aujourd'hui que nous sommes le 1er juin (et donc que l'heure systeme de mon ordi renvoie le 1er juin), tout est rentré dans l'ordre, le mois de juin commence bien un mardi (et les autres mois de 30 jours sont bon aussi).
Je constate que Jumano, l'auteur original de ce message a posté le problème un 31 mars, donc la veille d'un mois de 30 jours (avril).
Si quelqu'un a une idée, car je n'ai pas réussi à trouver ou etait le bug dans le code posté par Jumano.
Merci d'avance!

Bonjour, je suis l'auteur de ce script , mais je n'ai actuellement pas du tout le temps de me pencher sur ce problème :'(

Bonjour,
Ok, merci pour ton script, il est très bien et m'est très utile :)
A priori le bug ne devrait se produire la prochaine fois que le 31aout (avec un décalage des jours de septembre), donc j'ai un peu de temps devant moi pour trouver la solution. Si d'ici là tu trouves un moment pour jeter un coup d'oeil, je serai très friand de la solution... :)
Merci!

@le_chomeur

2 remarques :

- concernant les années bissextiles :
remplacer

Code:

---

var nbJoursfevrier = (current_year % 4) == 0 ? 29 : 28;

---

par

Code:

---

var nbJoursfevrier = (yearCurrent % 400) == 0 || (yearCurrent % 4) == 0 && (yearCurrent % 100) != 0 ? 29 : 28;

---

(même si ça ne risque pas de poser de problème avant ... 2100 !)

- le bug ne se produit pas que quand on est un 31, mais quand on ouvre le calendrier alors que la date sélectionnée est un 31.
Par exemple en ayant sélectionné le 31 mai et en affichant le mois de juin, la fonction createMonth(parameter) est appelée avec en paramètre le 31 juin. Le javascript la transforme en une date valide : le 1er juillet, et c'est donc le mois de juillet qui s'affiche au lieu du mois de juin.

Merci pour ces informations Marts , j'irais modifier le script en conséquence :) dès que j'aurais un peu de temps