function findPosX(obj) { var curleft = 0; if(obj.offsetParent) while(1) { curleft += obj.offsetLeft; if(!obj.offsetParent) break; obj = obj.offsetParent; } else if(obj.x) curleft += obj.x; return curleft; } function findPosY(obj) { var curtop = 0; if(obj.offsetParent) while(1) { curtop += obj.offsetTop; if(!obj.offsetParent) break; obj = obj.offsetParent; } else if(obj.y) curtop += obj.y; return curtop; } /**************************************************************************************** CALENDRIER DYNAMIQUE 1.0 Date: 31 mai 2008 Auteur: Québec Code Source - info@codes-sources.qc.ca Source: http://www.codes-sources.qc.ca/codes-sources/javascript/calendrier-dynamique-1_0.html La version originale de ce code et plus encore sur http://www.codes-sources.qc.ca *** La modification ou suppression des informations ci-dessus ou de cette note *** *** constitue une violation des conditions d'utilisation. *** INSTRUCTIONS: 1- Placez le code suivant à l'intérieur de la balise de votre page: 2- Sur le contrôle "input" de votre page, ajoutez l'attribut: onFocus="javascript: calendrier('inputId', dateMin, dateMax);" Prenez soin de remplacer les paramètres par vos propres valeurs: inputId = Id du champ texte dans lequel vous voulez récupérer la date dateMin = Date minimum du calendrier (optionnel) dateMax = Date maximum du calendrier (optionnel) 3- Si nécessaire, modifiez les configurations par défaut au haut du script selon votre utilisation ****************************************************************************************/ var mois = new Array('janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'); var moisCourt = new Array('jan', 'fév', 'mars', 'avr', 'mai', 'juin', 'juil', 'août', 'sept', 'oct', 'nov', 'déc'); var jourSem = new Array('dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'); var jourSemCourt = new Array('dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam'); var nbAnDef = 1; //Nombre d'années pour la plage disponible du calendrier lorsque la date minimum ou maximum fait défaut var dateFormat = 'jj/mm/aaaa'; /* Valeurs possibles de formatage de date: aaaa = Année sur 4 caractères aa = Année sur 2 caractères mmmm = Nom du mois au long mmm = Nom du mois court (abrégé) mm = Numéro du mois AVEC zéro devant (01, 02, ..., 12) m = Numéro du mois SANS zéro devant (1, 2, ..., 12) jjjj = Nom du jour de la semaine au long jjj = Nom du jour de la semaine court (abrégé) jj = Date AVEC zéro devant (01, 02, ..., 31) j = Date SANS zéro devant (1, 2, ..., 31) N.B. toute autre valeur à l'intérieur de la chaine de format ne sera pas remplacée Exemple: "dddd, le j mmm aaaa" donnera "mardi, le 1 juillet 2008" */ /********************** Il n'est pas nécessaire de modifier le code dépassé cette ligne **********************/ function calendrier(inputId, dateMini, dateMaxi) { var calendrierId = 'calendrier_' + inputId; var dateMin; var dateMax; //Enlever les heures/minutes aux dates passées en paramètre if (dateMini != undefined) dateMin = new Date(dateMini.getFullYear(), dateMini.getMonth(), dateMini.getDate()); if (dateMaxi != undefined) dateMax = new Date(dateMaxi.getFullYear(), dateMaxi.getMonth(), dateMaxi.getDate()); if (dateMin == undefined && dateMax == undefined) { //Aucune date min ou max donnée, valeurs par défaut dateMin = new Date(); dateMax = new Date(); dateMax.setFullYear(dateMax.getFullYear() + nbAnDef); dateMax.setDate(dateMax.getDate() - 1); } else { if (dateMin == undefined) { //Date min non donnée, définir à [date max] - n années + 1 jour dateMin = new Date(dateMax.getFullYear(),dateMax.getMonth(), dateMax.getDate()); dateMin.setFullYear(dateMin.getFullYear() - nbAnDef); dateMin.setDate(dateMin.getDate() + 1); } else { if (dateMax == undefined) { //Date max non donnée, définir à [date min] + n années - 1 jour dateMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate()); dateMax.setFullYear(dateMax.getFullYear() + nbAnDef); dateMax.setDate(dateMax.getDate() - 1); } } } //S'assurer que la date min est inférieure à la date max if (dateMax < dateMin) dateMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate()); //Générer le calendrier var cal = document.createElement('div'); cal.style.position = 'absolute'; cal.style.left = 80+findPosX(document.getElementById(inputId)) + 'px'; cal.style.top = -77+findPosY(document.getElementById(inputId)) + 'px'; cal.id = calendrierId; cal.className = 'calendrier'; //Entête var entete = document.createElement('div'); entete.className = 'calendrierEntete'; entete.appendChild(document.createElement('a')); entete.lastChild.href = 'javascript: calendrierFermer(\'' + calendrierId + '\'); void(0);'; entete.lastChild.innerHTML = '[X]'; cal.appendChild(entete); //Menu déroulant de sélection du mois var p=0; var aJour; var selMois = document.createElement('select'); selMois.id = 'mois_' + calendrierId; selMois.onchange = function() {afficherMois(calendrierId, this.selectedIndex)}; var dateMois = new Date(dateMin.getFullYear(), dateMin.getMonth(), 1); while (dateMois <= dateMax) { selMois.appendChild(document.createElement('option')); selMois.lastChild.innerHTML = mois[dateMois.getMonth()] + ' ' + dateMois.getFullYear().toString(); selMois.lastChild.value = formatDate(dateMois, 'aaaammjj'); if (dateMois.getMonth() == (new Date()).getMonth() && dateMois.getFullYear() == (new Date()).getFullYear()) pageMoisCourant = p; dateMois.setMonth(dateMois.getMonth() + 1); p++; } //Boutons mois précédent/suivant var aMoisPrec = document.createElement('a'); aMoisPrec.id = 'moisPrec_' + calendrierId; aMoisPrec.href = 'javascript: afficherMois(\'' + calendrierId + '\', document.getElementById(\'mois_' + calendrierId + '\').selectedIndex - 1);'; aMoisPrec.innerHTML = '<'; var aMoisSuiv = document.createElement('a'); aMoisSuiv.id = 'moisSuiv_' + calendrierId; aMoisSuiv.href = 'javascript: afficherMois(\'' + calendrierId + '\', document.getElementById(\'mois_' + calendrierId + '\').selectedIndex + 1);'; aMoisSuiv.innerHTML = '>'; cal.appendChild(aMoisPrec); cal.appendChild(document.createTextNode(' ')); cal.appendChild(selMois); cal.appendChild(document.createTextNode(' ')); cal.appendChild(aMoisSuiv); //Entête des jours de la semaine cal.appendChild(document.createElement('div')); for (d=0; d<7; d++) { cal.lastChild.appendChild(document.createElement('span')); cal.lastChild.lastChild.className = 'calendrierCase'; cal.lastChild.lastChild.appendChild(document.createTextNode(jourSemCourt[d])); } //Mémoriser les valeurs importantes dans des input cachés cal.appendChild(document.createElement('input')); cal.lastChild.id = 'moisCourant_' + calendrierId; cal.lastChild.value = pageMoisCourant; cal.lastChild.style.visibility = 'hidden'; cal.lastChild.style.position = 'absolute'; cal.appendChild(document.createElement('input')); cal.lastChild.id = 'dateMin_' + calendrierId; cal.lastChild.value = formatDate(dateMin, 'aaaammjj'); cal.lastChild.style.visibility = 'hidden'; cal.lastChild.style.position = 'absolute'; cal.appendChild(document.createElement('input')); cal.lastChild.id = 'dateMax_' + calendrierId; cal.lastChild.value = formatDate(dateMax, 'aaaammjj'); cal.lastChild.style.visibility = 'hidden'; cal.lastChild.style.position = 'absolute'; cal.appendChild(document.createElement('input')); cal.lastChild.id = 'inputId_' + calendrierId; cal.lastChild.value = inputId; cal.lastChild.style.visibility = 'hidden'; cal.lastChild.style.position = 'absolute'; if (document.getElementById(calendrierId)) calendrierFermer(calendrierId); //Prévention de l'affichage des contrôles en arrière-plan par dessus le calendrier if (navigator.userAgent.indexOf('MSIE') >= 0) { var iframe = document.createElement('iframe'); iframe.style.position = 'absolute'; iframe.style.top = cal.style.top; iframe.style.left = cal.style.left; iframe.id = 'iframe_' + calendrierId; iframe.className = 'ieCalendrierIframe'; document.body.appendChild(iframe); } document.body.appendChild(cal); selMois.focus(); afficherMois(calendrierId, pageMoisCourant); } function afficherMois(calendrierId, page) { document.getElementById('mois_' + calendrierId).selectedIndex = page; if (document.getElementById('mois' + page + '_' + calendrierId) == undefined) genererPageMois(calendrierId, page); var pageAvant = document.getElementById('moisCourant_' + calendrierId); document.getElementById('mois' + pageAvant.value + '_' + calendrierId).style.display='none'; document.getElementById('mois' + page + '_' + calendrierId).style.display='block'; pageAvant.value = page; document.getElementById('moisPrec_' + calendrierId).style.visibility = 'visible'; document.getElementById('moisSuiv_' + calendrierId).style.visibility = 'visible'; if (document.getElementById('mois_' + calendrierId).selectedIndex == 0) document.getElementById('moisPrec_' + calendrierId).style.visibility = 'hidden'; if (document.getElementById('mois_' + calendrierId).selectedIndex == document.getElementById('mois_' + calendrierId).length - 1) document.getElementById('moisSuiv_' + calendrierId).style.visibility = 'hidden'; } function genererPageMois(calendrierId, p) { var dateMois, dateMin, dateMax; var texteDate; var page; var d = 0; var m; page = document.createElement('div'); page.id = 'mois' + p + '_' + calendrierId; page.style.display = 'none'; page.className = 'calendrierPage'; //Générer la page du mois dateMois = new Date(document.getElementById('mois_' + calendrierId).value.substring(0, 4), parseInt(document.getElementById('mois_' + calendrierId).value.substring(4, 6), 10) - 1, document.getElementById('mois_' + calendrierId).value.substring(6, 8)); dateMin = new Date(document.getElementById('dateMin_' + calendrierId).value.substring(0, 4), parseInt(document.getElementById('dateMin_' + calendrierId).value.substring(4, 6), 10) - 1, document.getElementById('dateMin_' + calendrierId).value.substring(6, 8)); dateMax = new Date(document.getElementById('dateMax_' + calendrierId).value.substring(0, 4), parseInt(document.getElementById('dateMax_' + calendrierId).value.substring(4, 6), 10) - 1, document.getElementById('dateMax_' + calendrierId).value.substring(6, 8)); m = dateMois.getMonth(); d = 0; if (d < dateMois.getDay()) { page.appendChild(document.createElement('div')); page.lastChild.className = 'calendrierPageLigne'; while (d < dateMois.getDay()) { page.lastChild.appendChild(document.createElement('span')); page.lastChild.lastChild.className = 'calendrierCase'; page.lastChild.lastChild.innerHTML=' '; d++; } } while (m == dateMois.getMonth()) { if (d==7) d=0; if (d==0) { page.appendChild(document.createElement('div')); page.lastChild.className = 'calendrierPageLigne calendrierDate'; } page.lastChild.appendChild(document.createElement('span')); if (dateMois >= dateMin && dateMois <= dateMax) { page.lastChild.lastChild.className = 'calendrierCase calendrierDate'; texteDate = formatDate(dateMois, dateFormat); aJour = document.createElement('a'); aJour.href = 'javascript: calendrierChoixDate(\'' + calendrierId + '\', \'' + document.getElementById('inputId_' + calendrierId).value + '\', \'' + texteDate + '\'); void(0);'; aJour.innerHTML = dateMois.getDate(); aJour.title = texteDate; page.lastChild.lastChild.appendChild(aJour); } else { page.lastChild.lastChild.className = 'calendrierCase calendrierDateInactif'; page.lastChild.lastChild.innerHTML = dateMois.getDate(); } dateMois.setDate(dateMois.getDate() + 1); d++; } while (d < 7) { page.lastChild.appendChild(document.createElement('span')); page.lastChild.lastChild.className = 'calendrierCase calendrierDate'; page.lastChild.lastChild.innerHTML = ' '; d++; } document.getElementById(calendrierId).appendChild(page); } function calendrierFermer(calendrierId) { document.body.removeChild(document.getElementById(calendrierId)); if (document.getElementById('iframe_' + calendrierId) != undefined) document.body.removeChild(document.getElementById('iframe_' + calendrierId)); } function calendrierChoixDate(calendrierId, inputId, inputVal) { document.getElementById(inputId).value = inputVal; calendrierFermer(calendrierId); } function getTop(object) { if (object.parent != undefined) return (object.offsetTop + object.parent.offsetTop); else return (object.offsetTop); } function getLeft(object) { if (object.parent != undefined) return (object.offsetLeft + object.parent.offsetLeft); else return (object.offsetLeft); } function formatDate(date, format) { var temp; var retour = ''; var formatTemp = ''; for (var i=0; i