Problème d'affichage du calendrier JS par didou79 - page 1

Bonjour les amis,

Voici mon problème : J'ai un calendrier en javascript sur ma page qui marche très bien. J'ai également sur ma page des select (liste déroulantes).

Quand j'ouvre mon calendrier, il se positionne derrière le select, et ne devient plus cliquable... Autrement dit, le select se positionne toujours au dessus de mon calendrier ouvert et par conséquent le cache.

Le souci que je décris ne survient que sur IE6, firefox affiche correctement la page.

Voici le code html de la page :

<!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>Document sans nom</title>
</head>

<body>

<table>

<tr><td colspan="3"><div id="div_devise2" style="display:none">
	<table  width="100%" align="center" >
<TR> 
	<TD colspan="2" class="tdSautLigne5px"></TD>
</TR>
<TR>
        <TD  class="V11bleuGras" width="45%" align="right">Devise&nbsp;:&nbsp;</td>
        <td class="V11bleu" > <select name="devise" size="1" class="input">
             <option value="aaa" selected>Choisir une devise</option>
			<option value="0">EUR</option>
            <option value="aed" >AED&nbsp;-&nbsp;Dirham Emirats Arabes Unis </option>
           
          </select></td>
      </TR></table>
	
	</div></td> </tr>
<TR> 
	<TD colspan="3" class="tdSautLigne5px"></TD>
</TR>

<TR>
	<TD colspan="3">
	<div id="div_reg" style="display:block">
	<table width="100%"><tr>
	  <td class="V11bleuGras" align="right" width="45%"><span style="font-size: 14px;">*</span>&nbsp;Date de règlement souhaitée&nbsp;<A HREF="javascript:affichage_popup('pai_remises_virem_creer_aide.htm');" onMouseOver="if (VersionNav(3.0,4.0))  imgConseils.src='../gif/bt_conseils_on.gif' " onMouseOut="imgConseils.src='../gif/bt_conseils.gif' "><IMG ALT="Aide" NAME="imgConseils" WIDTH="18" HEIGHT="18" BORDER="0" SRC="../gif/bt_conseils.gif" ONLOAD="tempImg=new Image(0,0); tempImg.src='../gif/bt_conseils_on.gif'" HSPACE="1"></a>&nbsp;:&nbsp;</td>
	  <td class="V11bleu"><INPUT TYPE="text" NAME="date1"  id="date1" CLASS="input" value="jj/mm/aaaa" size="11">&nbsp;<img src="../gif/cal.gif" width="16" height="16" border="0" alt="Cliquer sur cette icone pour choisir une date"  onclick="ds_sh(ds_getel('date1'));" style="cursor:pointer;" >&nbsp;(au plus tard le 15/04/2008)</TD>
</TR></table>
</div><div id="div_exe" style="display:none"><table width="100%"><tr><td class="V11bleuGras" align="right" width="45%"><span style="font-size: 14px;">*</span>&nbsp;Date d'exécution souhaitée&nbsp;<A HREF="javascript:affichage_popup('pai_remises_virem_creer_aide.htm');" onMouseOver="if (VersionNav(3.0,4.0))  imgConseils.src='../gif/bt_conseils_on.gif' " onMouseOut="imgConseils.src='../gif/bt_conseils.gif' "><IMG ALT="Aide" NAME="imgConseils" WIDTH="18" HEIGHT="18" BORDER="0" SRC="../gif/bt_conseils.gif" ONLOAD="tempImg=new Image(0,0); tempImg.src='../gif/bt_conseils_on.gif'" HSPACE="1"></a>&nbsp;:&nbsp;</td>
	<td class="V11bleu"><INPUT TYPE="text" NAME="date2"  id="date2" CLASS="input" value="jj/mm/aaaa" size="11">&nbsp;<img src="../gif/cal.gif" width="16" height="16" border="0" alt="Cliquer sur cette icone pour choisir une date"  onclick="ds_sh(ds_getel('date2'));" style="cursor:pointer;" >&nbsp;(au plus tard le 15/12/2008)</TD>
</TR></table></div></TD></TR>


</table>


</body>
</html>

Voici le code JS du calendrier en question :

// JavaScript Document
// Calendrier de periodes SA - 2007-04
// Code begin...
// Set the initial date.
var ds_i_date = new Date();
var ds_c_month = ds_i_date.getMonth() + 1;
var ds_c_year = ds_i_date.getFullYear();

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.


function ds_getel(id) {
	return document.getElementById(id);
}

// 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();
	s_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 +130+ 'px';
	ds_ce.style.top = the_top-170 + 'px';
	// Scroll it into view.
	ds_ce.scrollIntoView();
}


// 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;
}


function ds_ob_clean() {
	ds_ob = '';
}
function ds_ob_flush(ds_oe) {
	ds_oe.innerHTML = ds_ob;
	ds_ob_clean();
}
function ds_echo(t) {
	ds_ob += t;
}


// Calendar template
function ds_template_main_above(t) {
	return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
	     + '<tr>'
		 + '<td class="ds_head_icone" style="cursor: pointer;" onclick=""><img src="../gif/bt_info.gif" width="16" height="16" border="0" alt="Infos" style="cursor:pointer;"></td>'
		 + '<td class="ds_head" colspan="5">Dates disponibles</td>'
		 + '<td class="ds_head_icone" style="cursor: pointer;" onclick="ds_hi();"><img src="../gif/croix.gif" width="16" height="16" border="0" alt="Fermer" style="cursor:pointer;"></td>'
		 + '</tr>'
		 + '<tr>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();">&lt;</td>'
		 + '<td class="ds_head" colspan="5">'+t+'</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">&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) {
	var cday= new Date();
	
	if(d== cday.getDate() && m-1==cday.getMonth() && y == cday.getYear()){
		return '<td class="ds_cell" style="color:#000000; border:2px solid #000000;" onMouseOver="ds_hover(this);" onMouseOut="ds_hout(this);" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
	}else{
		return '<td class="ds_cell" onMouseOver="ds_hover(this);" onMouseOut="ds_hout(this);" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
	}
	// Define width the day row.
}

function ds_hover(cell){
	cell.className= "ds_cell_over";
}
function ds_hout(cell){
	cell.className= "ds_cell";
}
function ds_template_day_prev(d, m, y) {
	return '<td class="ds_cell_prev">' + d + '</td>';
	// Define width the day row.
}

function ds_template_day_next(d, m, y) {
	var cday= new Date();
	
	if(d== cday.getDate() && m-1==cday.getMonth() && y == cday.getYear()){
		return '<td class="ds_cell_next" style="color:#000000; border:2px solid #000000;">' + d + '</td>';
	}else{
		return '<td class="ds_cell_next">' + d + '</td>';
	}	
	//return '<td class="ds_cell_next">' + 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);
	
	days= getMonthDays(m,y);
	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());
		}

		var today = new Date();
		//date de début de la periode / date fin j-1
		//var periode_1 = period_st;
		//if(today.getMonth()-1>m-1 || (i<periode_1 && today.getMonth()-1==m-1)){
		var periode = new Date();
		periode.setDate(i);
		periode.setMonth(m);
		periode.setYear(y);
//		if(period_st.getMonth()>m-1 || (i<period_st.getDate() && period_st.getMonth()==m-1 && y<period_st.getFullYear())){
		//days before the authorized period
		if((y <= period_st.getFullYear() && m-1	<= period_st.getMonth() && i<period_st.getDate()) || y <period_st.getFullYear() || (y <= period_st.getFullYear() && m-1	< period_st.getMonth())){
			ds_echo (ds_template_day_prev(i + 1, m, y));		
		//}else if((i>= today.getDate()-1 && today.getMonth()==m-1) || today.getMonth()<m-1 ){
		//days after the authorized period
		}else if((i>= period_end.getDate() && m-1>= period_end.getMonth() && y >= period_end.getFullYear()) || (m-1>period_end.getMonth() && y>= period_end.getFullYear()) || y> period_end.getFullYear()){
			ds_echo (ds_template_day_next(i + 1, m, y));		
		}else{
		// 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(ds_oe);
	// Scroll it into view.
	ds_ce.scrollIntoView();
}
function is_inPeriod(d,m,y, d1,m1, d2,m2){
	if(d>=d1 && d<=d2){
		return true;
	}else{
		return false;
	}
}
function getMonthDays(m,y){
var days;
	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;
	}
	return days;
}


// 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);
	// DD/MM/YYYY
//	return y + '-' + m2 + '-' + d2;
	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));
	}
}

// And here is the end.

//script calendrier
//initialisation des variables
	var ds_oe = ds_getel('ds_calclass');
	// Container
	var ds_ce = ds_getel('ds_conclass');
	// Output Buffering
	var ds_ob = ''; 
	
	var today = new Date();
		//date debut de la periode 
	var period_st = new Date();
	var d1 = (today.getDate()-31)+ getMonthDays(today.getMonth()-1);
	period_st.setDate(d1);
	period_st.setMonth(today.getMonth()-1);
	period_st.setYear(today.getFullYear());
	//date de fin de periode
	var period_end = new Date();
	var d2=today.getDate()-1;
	period_end.setDate(d2);
	period_end.setMonth(today.getMonth());
	period_end.setYear(today.getFullYear());
<!-- period_end.value period_st.value-->
	// ces deux dates sont recuperees à partir du serveur
	//les calculs précédents ne sont donc nécessaire que pour la demo de la maquette

Merci d'avance pour votre aide! :-°

didou79

20 octobre 2008 à 10:56:59

RekinMalad

20 octobre 2008 à 13:32:11

D'ou l'interet de ne pas prendre un code que l'on ne comprends pas ...

20 octobre 2008 à 14:32:29

Bonjour RekinMalad,

Peux-tu être précis ? Qu'est-ce qui n'est pas clair dans mon code ? Souhaite-tu que je t'envoie d'autres éléments que j'aurais oubliés de mettre dans le post ?

21 octobre 2008 à 17:28:06

J'ai pensé à la propriété css z-index qui détermine l'ordre d'affichage. J'ai donc mis un z-index à mon calendrier et un autre inférieur à mon select. Ca ne marche pas :euh:

Quelqu'un pourrait-il m'aider s'il vous plaît!!

Merci d'avance!!!

24 octobre 2008 à 14:03:54

Bonjour,

Mon souci est tjs d'actualité! :euh:

Quelqu'un pourrait-il m'aider svp ?

Problème d'affichage du calendrier JS

Problème d'affichage du calendrier JS

Supprimer

Modérer

Signaler le message aux modérateurs