// Project: Dynamic Date Selector (DtTvB) - 2006-03-16 // Script featured on JavaScript Kit- http://www.javascriptkit.com // Code begin... // Set the initial date. 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', 'Mer', 'Jeu', 'Ven', 'Sam' ]; // You can translate it for your language. // Calendar template function ds_template_main_above(t) { return '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ''; } function ds_template_day_row(t) { return ''; // Define width in CSS, XHTML 1.0 Strict doesn't have width property for it. } function ds_template_new_week() { return ''; } function ds_template_blank_cell(colspan) { return '' } function ds_template_day(d, m, y) { //return ''; return ''; // Define width the day row. } function ds_template_today(d, m, y) { return ''; } function ds_template_day_disabled(d, m, y) { return ''; } function ds_template_day_periode(d, m, y) { return ''; } function ds_template_main_below() { return '' + '
<<<[Fermer]>>>
' + t + '
' + t + '
' + d + '' + d + '' + d + '' + d + '' + d + '
'; } // 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; // Date qui est actuellement saisie dans le champ var dateDuJourSelection; // Date qui est actuellement saisie dans le champ de date d'arrivée (début réserversation) var dateArrivee = document.getElementById(champArrivee).value; //On prend la valeur du champ qui affiche le calendrier if(ds_element_save == null){ //Si rien n'est renseigné, on prend la date d'arrivée (début réserversation) dateDuJourSelection = dateArrivee; } else{ dateDuJourSelection = ds_element_save.value; } var dateDuJour = new Date(); dateDuJour.setHours(0); dateDuJour.setMinutes(0); dateDuJour.setSeconds(0); var dateDuJourChampSelection = new Date(); dateDuJourChampSelection.setHours(0); dateDuJourChampSelection.setMinutes(0); dateDuJourChampSelection.setSeconds(0); dateDuJourChampSelection.setDate(getDate(dateDuJourSelection)); dateDuJourChampSelection.setMonth(getMonth(dateDuJourSelection)-1); dateDuJourChampSelection.setYear(getYear(dateDuJourSelection)); // Date qui est actuellement saisie dans le champ de date d'arrivée (début réserversation) var dateArrivee = document.getElementById(champArrivee).value; var dateDebutReservation = new Date(); dateDebutReservation.setHours(0); dateDebutReservation.setMinutes(0); dateDebutReservation.setSeconds(0); dateDebutReservation.setDate(getDate(dateArrivee)); dateDebutReservation.setMonth(getMonth(dateArrivee)-1); dateDebutReservation.setYear(getYear(dateArrivee)); // Date qui est actuellement saisie dans le champ de date de depart (fin réserversation) var dateDepart = document.getElementById(champDepart).value; var dateFinReservation = new Date(); dateFinReservation.setHours(0); dateFinReservation.setMinutes(0); dateFinReservation.setSeconds(2);//Pour les tests de comparaisons dateFinReservation.setDate(getDate(dateDepart)); dateFinReservation.setMonth(getMonth(dateDepart)-1); dateFinReservation.setYear(getYear(dateDepart)); for (i = 1; 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()); } var dateEnCoursIteration = new Date(y, m-1, i); dateEnCoursIteration.setHours(0); dateEnCoursIteration.setMinutes(0); dateEnCoursIteration.setSeconds(1);//Pour les tests de comparaisons //Mise en forme de la cellule selon la date en cours d'itération if (dateEnCoursIteration.getMonth() == dateDuJourChampSelection.getMonth() && dateEnCoursIteration.getYear() == dateDuJourChampSelection.getYear() && dateEnCoursIteration.getDate() == dateDuJourChampSelection.getDate()){ //Date du champ sélectionné (dans la période forcément) ds_echo (ds_template_today(i , m, y)); } else if(ds_element_save != null && ds_element_save.id == champDepart && dateEnCoursIteration < dateDebutReservation){ // Si on est dans le cas de la date de départ // Date avant la date de début de reservation non sélectionnable ds_echo (ds_template_day_disabled(i , m, y)); } else if(dateEnCoursIteration < dateDuJour){ // Si on est dans le cas de la date d'arrivée // Date avant la date de début du jour non sélectionnable ds_echo (ds_template_day_disabled(i , m, y)); } else if(dateEnCoursIteration >= dateDebutReservation && dateEnCoursIteration <= dateFinReservation){ // Si on est sur la période de réservation ds_echo (ds_template_day_periode(i , m, y)); } else{ // Make a row of that day! // Date valide, après date du jour ds_echo (ds_template_day(i , 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; ds_element_save = t; // Make a new date, and set the current month and year. var ds_sh_date = new Date(); //On place le calendrier sur la date qui est actuellement saisie dans le champ var dateASelectionner = document.getElementById(t.id).value; ds_sh_date.setDate(getDate(dateASelectionner)); ds_sh_date.setMonth(getMonth(dateASelectionner)-1); ds_sh_date.setYear(getYear(dateASelectionner)); 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); // Alignement à gauche de t the_left = ds_getleft(t) - ds_ce.offsetWidth + t.offsetWidth; // Alignement à droite de 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); } // 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); if(ds_element.id == champArrivee ){ dep = document.getElementById(champDepart); if(dep.value != 'undefined' && dep.value.length == 10){ if( d > parseInt(getYear(dep.value)) ){ document.getElementById(champDepart).value = ds_element.value ; } if( d == parseInt(getYear(dep.value)) && m > parseFloat(getMonth(dep.value)) ){ document.getElementById(champDepart).value = ds_element.value ; } if( d == parseInt(getYear(dep.value)) && m == parseFloat(getMonth(dep.value)) && y > parseFloat(getDate(dep.value)) ){ document.getElementById(champDepart).value = ds_element.value ; } }else{ document.getElementById(champDepart).value = ds_element.value; } } if(ds_element.id == champDepart ){ arr = document.getElementById(champArrivee); if(arr.value != 'undefined' && arr.value.length == 10){ if( d < parseInt(getYear(arr.value)) ){ document.getElementById(champArrivee).value = ds_element.value ; } if( d == parseInt(getYear(arr.value)) && m < parseFloat(getMonth(arr.value)) ){ document.getElementById(champArrivee).value = ds_element.value ; } if( d == parseInt(getYear(arr.value)) && m == parseFloat(getMonth(arr.value)) && y < parseFloat(getDate(arr.value)) ){ document.getElementById(champArrivee).value = ds_element.value ; } }else{ document.getElementById(champArrivee).value = ds_element.value; } } ds_actualiserChampsCaches(); // 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)); } } // And here is the end. /* ===================================A supprimer si jamais appelé============================================== function CheckForm() { Inverser(champArrivee); Inverser(champDepart); return true; } function Inverser(id) { // Reformatage de la date au format FR/EN // Récupération du jour machin = "0"; if (document.getElementById(id).value.substring(0, 2)[1] == '/') { jour = document.getElementById(id).value.substring(0,1) machin = "1" } else { jour = document.getElementById(id).value.substring(0,2) } // Récupération du mois if (machin == "1") { if (document.getElementById(id).value.substring(2, 4)[1] == '/') { mois = document.getElementById(id).value.substring(2, 3); } else { mois = document.getElementById(id).value.substring(2, 4); } } else { if (document.getElementById(id).value.substring(3, 5)[1] == '/') { mois = document.getElementById(id).value.substring(3, 4); } else { mois = document.getElementById(id).value.substring(3, 5); } } // Récupération de l’année annee = document.getElementById(id).value.substring(document.getElementById(id).value.length -4, document.getElementById(id).value.length); formatdate = mois + "/" + jour + "/" + annee; document.getElementById(id).value = formatdate; // alert(formatdate); } ================================== Fin : A supprimer si jamais appelé=========================================== */ // Sauvegarde de l'élément qui affiche le calendrier var ds_element_save = null; /* * ============================= * Configuration du calendrier * ============================= */ /* * ----------------------------- * Nom des champs de saisie * ----------------------------- */ var champArrivee = 'Arrivee'; var champDepart = 'Depart'; /* * ----------------------------- * Format dd/mm/yyyy * ----------------------------- */ // Mets à jour les dates au format yyyy-mm-dd pour la validation du formulaire function ds_actualiserChampsCaches(){ document.getElementById('calArrivalDateField').value = ds_convertirYYYYMMDD(document.getElementById(champArrivee).value); document.getElementById('calDepartureDateField').value = ds_convertirYYYYMMDD(document.getElementById(champDepart).value); } // dd/mm/yyyy -> yyyy-mm-dd function ds_convertirYYYYMMDD(dateAConvertir){ var date = getDate(dateAConvertir); var mois = getMonth(dateAConvertir); var year = getYear(dateAConvertir); return year+ "-" + mois+ "-" + date; } // Format the date to output. function ds_format_date(d, m, y) { // Mois sur 2 digits m2 = '00' + m; m2 = m2.substr(m2.length - 2); // Année sur 4 digits d2 = '0000' + d; d2 = d2.substr(d2.length - 4); // Jour sur 2 digits y2 = '00' + y; y2 = y2.substr(y2.length - 2); // dd/mm/yyyy return y2 + '/' + m2 + '/' + d2; } // Renvoie le mois d'une date sous forme dd/mm/yyyy ou dd-mm-yyyy function getMonth(date) { if(date == null){return "0";} return date.substring(3,5); } // Renvoie le jour du mois d'une date sous forme dd/mm/yyyy ou dd-mm-yyyy function getDate(date) { if(date == null){return "0";} return date.substring(0,2); } // Renvoie l'année d'une date sous forme dd/mm/yyyy ou dd-mm-yyyy function getYear(date) { if(date == null){return "0";} return date.substring(6,10); } /* * ----------------------------- * Format yyyy-mm-dd * ----------------------------- */ /* // Mets à jour les dates au format yyyy-mm-dd pour la validation du formulaire function ds_actualiserChampsCaches(){ document.getElementById('calArrivalDateField').value=document.getElementById(champArrivee).value; document.getElementById('calDepartureDateField').value=document.getElementById(champDepart).value; } // Format the date to output. function ds_format_date(d, m, y) { // Mois sur 2 digits m2 = '00' + m; m2 = m2.substr(m2.length - 2); // Année sur 4 digits d2 = '0000' + d; d2 = d2.substr(d2.length - 4); // Jour sur 2 digits y2 = '00' + y; y2 = y2.substr(y2.length - 2); // yyyy-mm-dd return d2 + '-' + m2 + '-' + y2; } // Renvoie le mois d'une date sous forme yyyy/mm/dd ou yyyy-mm-dd function getMonth(date) { if(date == null){return "0";} return date.substring(5,7); } // Renvoie le jour du mois d'une date sous forme yyyy/mm/dd ou yyyy-mm-dd function getDate(date) { if(date == null){return "0";} return date.substring(8,10); } // Renvoie l'année d'une date sous forme dd/mm/yyyy ou dd-mm-yyyy function getYear(date) { if(date == null){return "0";} return date.substring(0,4); } */