js日期控件

<script language="JavaScript">
<!--
var months = new
Array("一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二");
var
daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var
days = new Array("日", "一", "二", "三", "四", "五", "六");

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= "今天： " + 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>

<FORM name=myForm>
<INPUT type="text" id=MyDate name=MyDate
size=15 onfocus="toggleCalendar('MyDate')">
</form>

<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar

style="cursor:hand; DISPLAY: none; POSITION: absolute; Z-INDEX: 4">

<TBODY>
<TR>
<TD colSpan=7
vAlign=center>
<!-- Month combo box -->
<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>
月
<!--
Year combo box -->
<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">
<!-- Generate column for each day.
-->
<SCRIPT language=JavaScript>
// Output days.
for
(var intLoop = 0; intLoop < days.length;
intLoop++)
document.write("<TD style='width:25px;'>" + days[intLoop]
+ "</TD>");
</SCRIPT>
</TR>

<TBODY class="dates" id=dayList onclick="getDate('')"
vAlign=center>
<!-- Generate grid for individual days. -->

<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>

<!-- Generate today day. -->
<TBODY>

<TR>
<TD class="today" colSpan=5 id=todayday
onclick=getTodayDay()></TD>
<TD align=right
colSpan=2><A href="javascript:HideCalendar();">
<SPAN
style="COLOR: black; FONT-SIZE:
10px"><B>关闭</B></SPAN></A></TD>

</TR>
</TBODY>

</TABLE>