[js][html] calendario

**ganesha** · 08-11-2005, 16:48

sto utilizzando uno script js per la selezione di una data.
funziona bene tranne per una cosa:
quando visualizzo il calendario per selezionare una data questo non riesce a coprire i select-option già presenti nella pagina.

sicuramente non sono stato chiaro
ma basta aprire con IE6 (funziona solo con questo

) il
codice qui sotto per capire il problema.

mi date una mano
grazie

codice:

<html>
<head>
<script language="JavaScript">
<!--
var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var days = new Array("S", "M", "T", "W", "T", "F", "S");

today = new getToday();	
var element_id;

function getDays(month, year) 
{
	// Test for leap year when February is selected.
	if (1 == month)
		return ((0 == year % 4) && (0 != (year % 100))) ||
			(0 == year % 400) ? 29 : 28;
	else
		return daysInMonth[month];
}

function getToday()
{
	// Generate today's date.
	this.now = new Date();
	this.year = this.now.getFullYear() ; // Returned year XXXX
	this.month = this.now.getMonth();
	this.day = this.now.getDate();
}

 
function newCalendar() 
{
	var parseYear = parseInt(document.all.year  [document.all.year.selectedIndex].text);
 
	var newCal = new Date(parseYear , document.all.month.selectedIndex, 1);
	var day = -1;
	var startDay = newCal.getDay();
	var daily = 0; 

	today = new getToday(); // 1st call
	if ((today.year == newCal.getFullYear() ) &&   (today.month == newCal.getMonth()))
	   day = today.day;
	// Cache the calendar table's tBody section, dayList.
	var tableCal = document.all.calendar.tBodies.dayList;

	var intDaysInMonth =
	   getDays(newCal.getMonth(), newCal.getFullYear() );

	for (var intWeek = 0; intWeek < tableCal.rows.length;  intWeek++)
		   for (var intDay = 0;
			 intDay < tableCal.rows[intWeek].cells.length;
			 intDay++)
	 {
		  var cell = tableCal.rows[intWeek].cells[intDay];

		  // Start counting days.
		  if ((intDay == startDay) && (0 == daily))
			 daily = 1;

		  // Highlight the current day.
		  cell.style.color = (day == daily) ? "red" : "";
		  if(day == daily)
		  {
				document.all.todayday.innerText= "Today: " +  day + "/" + 
					(newCal.getMonth()+1) + "/" + newCal.getFullYear() ;
		  }
		  // Output the day number into the cell.
		  if ((daily > 0) && (daily <= intDaysInMonth))
			 cell.innerText = daily++;
		  else
			 cell.innerText = "";
	   }

}
	  
	 function getTodayDay()
	 {
			    document.all[element_id].value = today.day + "/" + (today.month+1) + 
					"/" + today.year; 
		        //document.all.calendar.style.visibility="hidden";
				document.all.calendar.style.display="none";
				document.all.year.selectedIndex =100;   
	            document.all.month.selectedIndex = today.month; 
	 }
 
        function getDate() 
		 {
            // This code executes when the user clicks on a day
            // in the calendar.
            if ("TD" == event.srcElement.tagName)
               // Test whether day is valid.
               if ("" != event.srcElement.innerText)
			   { 
				 var mn = document.all.month.selectedIndex+1;
    			 var Year = document.all.year [document.all.year.selectedIndex].text;
				 document.all[element_id].value=event.srcElement.innerText+"/"+mn +"/"  +Year;
		         //document.all.calendar.style.visibility="hidden";
				 document.all.calendar.style.display="none";
			 }
		 }
 
function GetBodyOffsetX(el_name, shift)
{
	var x;
	var y;
	x = 0;
	y = 0;

	var elem = document.all[el_name];
	do 
	{
		x += elem.offsetLeft;
		y += elem.offsetTop;
		if (elem.tagName == "BODY")
			break;
		elem = elem.offsetParent; 
	} while  (1 > 0);

	shift[0] = x;
	shift[1] = y;
	return  x;
}	

function SetCalendarOnElement(el_name)
{
	if (el_name=="") 
	el_name = element_id;
	var shift = new Array(2);
	GetBodyOffsetX(el_name, shift);
	document.all.calendar.style.pixelLeft  = shift[0]; //  - document.all.calendar.offsetLeft;
	document.all.calendar.style.pixelTop = shift[1] + 25 ;
}
	  
 	  
	           
function ShowCalendar(elem_name)
{
		if (elem_name=="")
		elem_name = element_id;

		element_id	= elem_name; // element_id is global variable
		newCalendar();
		SetCalendarOnElement(element_id);
		//document.all.calendar.style.visibility = "visible";
		document.all.calendar.style.display="inline";
}

function HideCalendar()
{
	//document.all.calendar.style.visibility="hidden";
	document.all.calendar.style.display="none";
}

function toggleCalendar(elem_name)
{
	//if (document.all.calendar.style.visibility == "hidden")
	if(document.all.calendar.style.display=="none")
		ShowCalendar(elem_name);
	else 
		HideCalendar();
}
-->
</script>

<style>
.today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold}
.days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN: center}
.dates {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt}
</style>
</head>





<body>



<FORM name=myForm action="date.php" method="post">
<INPUT id=MyDate name=MyDate size=15> 
Calendar






<select name="pippo">
<option value="1111111">1111111</option>
<option value="1111112">1111112</option>
<option value="1111113">1111113</option>
</select>
</form>







<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4">
  <TBODY>
  <TR>
    <TD colSpan=7 vAlign=center>
	
	<SELECT id=month onchange=newCalendar()> 
    	<SCRIPT language=JavaScript>
		// Output months into the document.
		// Select current month.
		for (var intLoop = 0; intLoop < months.length; intLoop++)
			document.write("<OPTION " +	(today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);
		</SCRIPT>
	</SELECT> 
	
	<SELECT id=year onchange=newCalendar()> 
        <SCRIPT language=JavaScript>
		// Output years into the document.
		// Select current year.
		for (var intLoop = 1900; intLoop < 2028; intLoop++)
			document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);
		</SCRIPT>
	</SELECT> 

	</TD>
  </TR>


	
  <TR class=days>
	
    <SCRIPT language=JavaScript>
	// Output days.
	for (var intLoop = 0; intLoop < days.length; intLoop++)
		document.write("<TD>" + days[intLoop] + "</TD>");
	</SCRIPT>
  </TR>


  <TBODY class=dates id=dayList onclick="getDate('')" vAlign=center>
  
  <SCRIPT language=JavaScript>
	for (var intWeeks = 0; intWeeks < 6; intWeeks++)
	{
		document.write("<TR>");
		for (var intDays = 0; intDays < days.length; intDays++)
			document.write("<TD></TD>");
		document.write("</TR>");
	}
  </SCRIPT>

  </TBODY>
  <TBODY>
  <TR>
    <TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD>
    <TD align=right colSpan=2><SPAN style="COLOR: black; FONT-SIZE: 10px">Hide</SPAN></TD>
  </TR>
  </TBODY>

</TABLE>
</body>
</html>

**ganesha** · 08-11-2005, 20:29

up

**ganesha** · 09-11-2005, 11:42

Discussione: [js][html] calendario

Strumenti discussione

Ricerca discussione

Visualizza

[js][html] calendario

Permessi di invio