使用的是一个img作为按钮,一个iframe载入日期页面
<img id="imgdate" style="left: 137px; cursor: hand; position: absolute; top: 1px" onclick="setlstdate1visible(txtdate)" src="images/imgbtn/frmmaindate.gif" width="21">
<iframe class="dtpmonth1" id="lstdate1" style="display: none; z-index: 105; left: 112px; width: 176px; position: absolute; top: 152px; height: 160px"
tabindex="-1" name="lstdate1" src="frmdate.aspx" frameborder="0" scrolling="no">
</iframe>
<%@ page language="vb" autoeventwireup="false" codebehind="frmdate.aspx.vb" inherits="most_web.frmdate"%>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>dtpdate1</title>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta content="microsoft visual studio .net 7.0" name="generator">
<meta content="visual basic 7.0" name="code_language">
<meta content="javascript" name="vs_defaultclientscript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetschema">
<link href="styles.css" type="text/css" rel="stylesheet">
<script language="javascript" src="comfuncs.js"></script>
<script language="javascript">
function runnian(the_year)//取得是否為潤年
{
if ((the_year%400==0) || ((the_year%4==0) && (the_year%100!=0)))
return true;
else
return false;
}
function getweekday(the_year,the_month)
{
var allday;
allday = 0;
if (the_year>2000)
{
for (i=2000 ;i<the_year; i++) //計算從2000年開始到今年的天數
{
if (runnian(i)){
allday += 366;
}else{
allday += 365;
}
}
for (i=2; i<=the_month; i++)
{
switch (i)
{
case 2 : allday += 31; break;
case 3 :
if (runnian(the_year)){
allday += 29;
}else{
allday += 28;
}
break;
case 4 : allday += 31; break;
case 5 : allday += 30; break;
case 6 : allday += 31; break;
case 7 : allday += 30; break;
case 8 : allday += 31; break;
case 9 : allday += 31; break;
case 10 : allday += 30; break;
case 11 : allday += 31; break;
case 12 : allday += 30; break;
}
}
}
return (allday+6)%7;
}
function chooseday(objname,the_year,the_month,the_day)
{
var firstday;
firstday = getweekday(the_year,the_month);//取得星期幾
showcalender(objname,the_year,the_month,the_day);
}
function showdate(objname,the_year,the_month,the_day){//顯示日期,將所選的日期傳到textbox中顯示出來
var txtdate;
objname="txtdate";
txtdate= objname;
var completely_date;
var cur_month
var cur_day
if (the_month.tostring().length==1){//給月前面加0
cur_month="0"+the_month
}else{
cur_month=the_month
}
if (the_day.tostring().length==1){//給日期前加0
cur_day="0"+the_day
}else{
cur_day=the_day
}
if (the_day!=0)//調整日期的樣式
completely_date = the_year + "/" + cur_month + "/" + cur_day;
else
completely_date = "no choose";
parent.document.all(txtdate).innertext = completely_date;//顯示給textbox
}
function nextmonth(objname,the_year,the_month,the_day)//選擇下個月
{
if (the_month==12)
chooseday(objname,the_year+1,1,the_day);
else
chooseday(objname,the_year,the_month+1,the_day);
}
function prevmonth(objname,the_year,the_month,the_day)//選擇上一月
{
if (the_month==1)
chooseday(objname,the_year-1,12,the_day);
else
chooseday(objname,the_year,the_month-1,the_day);
}
function closeself(){
top.document.frames(1).document.frames(1).objlostfocus();
}
function showcalender(objname,the_year,the_month,the_day)//
{
var firstday=getweekday(the_year,the_month);
var showstr;
var month_day; //顯示月的天數
var showmonth; //顯示月
var today; //當前天
var k=0
today = new date();
switch (the_month)//根據月來確定天數
{
case 1 : showmonth = "01"; month_day = 31; break;
case 2 :
showmonth = "02";
if (runnian(the_year))
month_day = 29;
else
month_day = 28;
break;
case 3 : showmonth = "03"; month_day = 31; break;
case 4 : showmonth = "04"; month_day = 30; break;
case 5 : showmonth = "05"; month_day = 31; break;
case 6 : showmonth = "06"; month_day = 30; break;
case 7 : showmonth = "07"; month_day = 31; break;
case 8 : showmonth = "08"; month_day = 31; break;
case 9 : showmonth = "09"; month_day = 30; break;
case 10 : showmonth = "10"; month_day = 31; break;
case 11 : showmonth = "11"; month_day = 30; break;
case 12 : showmonth = "12"; month_day = 31; break;
}
showstr = "";//葉面的樣式
showstr = "<table class=calender height=100% width=100% cellpadding=0 cellspacing=0 border=0 bordercolor=red align=center valign=top>";
showstr += "<tr height=20 class=title1><td colspan=6>期日を選ぶ</td><td align=right><img style=cursor: hand onclick=closeself() height=15 src=./images/imgbtn/close.gif width=15></td></tr>";
showstr += "<tr height=20 class=title2><td width=3><img style=cursor:hand src=./images/imgbtn/btnleft.gif onclick=prevmonth(" + objname + ","+the_year+","+the_month+","+the_day+")></td><td align=left colspan=5>" + the_year + "年"+showmonth+"月"+"</td><td align=right width=30 ><img style=cursor:hand onclick=nextmonth(" + objname + ","+the_year+","+the_month+","+the_day+") src=./images/imgbtn/btnright.gif></td></tr>";
showstr += "<tr><td align=center width=100% colspan=7>";
showstr += "<table cellpadding=0 cellspacing=0 border=0 bordercolor=#999999 width=100%>";
showstr += "<tr align=center class=title3> ";
showstr += "<td class=sun>日</td>";
showstr += "<td>月</td>";
showstr += "<td>火</td>";
showstr += "<td>水</td>";
showstr += "<td>木</td>";
showstr += "<td>金</td>";
showstr += "<td class=sat>土</td>";
showstr += "</tr><tr>"; //上面是設置完成日期的頭部
k=k+1;
for (i=1; i<=firstday; i++) //firstday傳過來的當前月第一天是星期幾
{
showstr += "<td align=center class=day> </td>"; //將前面的天數置空
}
if(the_day>month_day)
{
the_day=month_day; //用選擇的天the_day和當前月天數month_day比較
}
for (i=1; i<=month_day; i++)
{
if (the_day==i){
bgcolor = "dayselected";
}else{
bgcolor = "day";
}
if ((the_year==today.getyear()) && (the_month==today.getmonth()+1) && (i==today.getdate())){
showstr += "<td align=center class=" + bgcolor + " style=cursor: hand;background-position: center center;background-repeat: no-repeat;background-image: url(./images/imgbtn/date.gif); onclick=chooseday(" + objname + "," + the_year + "," + the_month + "," + i + ")>" + i ;
}else{
showstr += "<td align=center class=" + bgcolor + " style=cursor:hand onclick=chooseday(" + objname + "," + the_year + "," + the_month + "," + i + ")>" + i ;
}
showstr += "</td>";
firstday = (firstday + 1)%7;
if ((firstday==0) && (i!=month_day)) {
showstr += "</tr><tr>";
k=k+1;
}
}
if (firstday!=0) //firstday傳過來的當前月第一天是星期幾
{
for (i=firstday; i<7; i++)
showstr += "<td align=center class=day> </td>";
showstr += "</tr>";
}
showstr += "</tr><tr>"
if (k==5){
showstr += "<td colspan=7 class=day> </td></tr><tr>";
}
var curmonth;
var curday;
if ((today.getmonth()+1).tostring().length==1){
curmonth="0"+(today.getmonth()+1);
}else{
curmonth=(today.getmonth()+1);
}
if (today.getdate().tostring().length==1){
curday="0"+today.getdate();
}else{
curday=today.getdate();
}
showstr +="<td class=title4 colspan=2><img src=./images/imgbtn/date.gif></td><td align=left colspan=5 class=title4 style=cursor: hand; onclick=getdtpdate();>  今日:"+today.getyear()+"/"+curmonth+"/"+curday+"</td>"
showstr += "</tr></table></td></tr></table>";
document.all(objname).innerhtml= showstr;
showdate("txtfrom",the_year,the_month,the_day)
}
function getdtpdate(strdate){
today = new date();
if (!dcheckdate(strdate,"yyyy/mm/dd")){
the_year = today.getyear();
the_month = today.getmonth() + 1;
the_day = today.getdate();
firstday = getweekday(the_year,the_month);
}else{
var curday=new date(strdate)
the_year = curday.getyear();
the_month = curday.getmonth() + 1;
the_day = curday.getdate();
firstday = getweekday(the_year,the_month);
}
showcalender("date1",the_year,the_month,the_day);
}
</script>
</head>
<body>
<form id="form1" method="post">
<table style="left: 0px; position: absolute; top: 0px" cellspacing="0" cellpadding="0"
border="0">
<tr>
<td id="date1"><font face="ms ui gothic"></font></td>
</tr>
</table>
</form>
</body>
</html>
