繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 实现日历式日期选择
- Javascript
- 在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
- 用Javascript读取中文COOKIE的解决办法
- 功能很全的精品JS计算器
- 永不消失的title提示代码
- 一直复略了的一个问题，关于表单重复提交
- 初探jquery——表单应用范例
- 懒就要懒到底——鼠标自动点击（含时间判断）
- 关于表单的两点交互体验改进技巧
- javascript知识点收藏
- 用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
- 如何使页面打开时input就被选中？
- 点选TOP后并不是直接跳到页顶的，而是滚动上去的
- js玩一玩WSH吧
- 【最新漏洞】IE中使用Rds.DataSpace下载并运行病毒文件
- select选择事件问题
- SUN的《AJAX与J2EE》全文译了
- 你真的了解JavaScript吗？
- 极酷的javascirpt，让你随意编辑任何网页
- 用javascript编写的第一人称射击游戏
- 轻轻松松学习JavaScript
Javascript 中的 JavaScript 实现日历式日期选择
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 246 ::
收藏到网摘: n/a
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Canlender--JavaScript</title>
<style>
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="180">
<tr><td id=cc>
</td></tr></table>
</body>
<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++)
if (RunNian(i))
Allday += 366;
else
Allday += 365;
for (i=2; i<=The_Month; i++)
{
switch (i)
{
case 2 :
if (RunNian(The_Year))
Allday += 29;
else
Allday += 28;
break;
case 3 : Allday += 31; break;
case 4 : Allday += 30; break;
case 5 : Allday += 31; break;
case 6 : Allday += 30; break;
case 7 : Allday += 31; break;
case 8 : Allday += 31; break;
case 9 : Allday += 30; break;
case 10 : Allday += 31; break;
case 11 : Allday += 30; break;
case 12 : Allday += 31; break;
}
}
}
return (Allday+6)%7;
}
function chooseday(The_Year,The_Month,The_Day)
{
var Firstday;
var completely_date;
if (The_Day!=0)
completely_date = The_Year + "-" + The_Month + "-" + The_Day;
else
completely_date = "No Choose";
//showdate 只是一个为了显示而采用的东西，
//如果外部想引用这里的时间，可以通过使用 completely_date引用完整日期
//也可以通过The_Year,The_Month,The_Day分别引用年，月，日
//当进行月份和年份的选择时，认为没有选择完整的日期
showdate.innerText = completely_date;
Firstday = GetWeekday(The_Year,The_Month);
ShowCalender(The_Year,The_Month,The_Day,Firstday);
}
function nextmonth(The_Year,The_Month)
{
if (The_Month==12)
chooseday(The_Year+1,1,0);
else
chooseday(The_Year,The_Month+1,0);
}
function prevmonth(The_Year,The_Month)
{
if (The_Month==1)
chooseday(The_Year-1,12,0);
else
chooseday(The_Year,The_Month-1,0);
}
function prevyear(The_Year,The_Month)
{
chooseday(The_Year-1,The_Month,0);
}
function nextyear(The_Year,The_Month)
{
chooseday(The_Year+1,The_Month,0);
}
function ShowCalender(The_Year,The_Month,The_Day,Firstday)
{
var showstr;
var Month_Day;
var ShowMonth;
var today;
today = new Date();
switch (The_Month)
{
case 1 : ShowMonth = "January"; Month_Day = 31; break;
case 2 :
ShowMonth = "February";
if (RunNian(The_Year))
Month_Day = 29;
else
Month_Day = 28;
break;
case 3 : ShowMonth = "March"; Month_Day = 31; break;
case 4 : ShowMonth = "April"; Month_Day = 30; break;
case 5 : ShowMonth = "May"; Month_Day = 31; break;
case 6 : ShowMonth = "June"; Month_Day = 30; break;
case 7 : ShowMonth = "July"; Month_Day = 31; break;
case 8 : ShowMonth = "August"; Month_Day = 31; break;
case 9 : ShowMonth = "September"; Month_Day = 30; break;
case 10 : ShowMonth = "October"; Month_Day = 31; break;
case 11 : ShowMonth = "November"; Month_Day = 30; break;
case 12 : ShowMonth = "December"; Month_Day = 31; break;
}
showstr = "";
showstr = "<Table cellpadding=0 cellspacing=0 border=1 bordercolor=#999999 width=95% align=center valign=top>";
showstr += "<tr><td width=0 style='cursor:hand' onclick=prevyear("+The_Year+"," + The_Month + ")><<</td><td width=0> " + The_Year + " </td><td width=0 onclick=nextyear("+The_Year+","+The_Month+") style='cursor:hand'>>></td><td width=0 style='cursor:hand' onclick=prevmonth("+The_Year+","+The_Month+")><<</td><td width=100 align=center>" + ShowMonth + "</td><td width=0 onclick=nextmonth("+The_Year+","+The_Month+") style='cursor:hand'>>></td></tr>";
showstr += "<tr><td align=center width=100% colspan=6>";
showstr += "<table cellpadding=0 cellspacing=0 border=1 bordercolor=#999999 width=100%>";
showstr += "<Tr align=center bgcolor=#999999> ";
showstr += "<td><strong><font color=#0000CC>日</font></strong></td>";
showstr += "<td><strong><font color=#0000CC>一</font></strong></td>";
showstr += "<td><strong><font color=#0000CC>二</font></strong></td>";
showstr += "<td><strong><font color=#0000CC>三</font></strong></td>";
showstr += "<td><strong><font color=#0000CC>四</font></strong></td>";
showstr += "<td><strong><font color=#0000CC>五</font></strong></td>";
showstr += "<td><strong><font color=#0000CC>六</font></strong></td>";
showstr += "</Tr><tr>";
for (i=1; i<=Firstday; i++)
showstr += "<Td align=center bgcolor=#CCCCCC> </Td>";
for (i=1; i<=Month_Day; i++)
{
if ((The_Year==today.getYear()) && (The_Month==today.getMonth()+1) && (i==today.getDate()))
bgColor = "#FFCCCC";
else
bgColor = "#CCCCCC";
if (The_Day==i) bgColor = "#FFFFCC";
showstr += "<td align=center bgcolor=" + bgColor + " style='cursor:hand' onclick=chooseday(" + The_Year + "," + The_Month + "," + i + ")>" + i + "</td>";
Firstday = (Firstday + 1)%7;
if ((Firstday==0) && (i!=Month_Day)) showstr += "</tr><tr>";
}
if (Firstday!=0)
{
for (i=Firstday; i<7; i++)
showstr += "<td align=center bgcolor=#CCCCCC> </td>";
showstr += "</tr>";
}
showstr += "</tr></table></td></tr></table>";
cc.innerHTML = showstr;
}
</script>
<script language="JavaScript">
var The_Year,The_Day,The_Month;
var today;
var Firstday;
today = new Date();
The_Year = today.getYear();
The_Month = today.getMonth() + 1;
The_Day = today.getDate();
Firstday = GetWeekday(The_Year,The_Month);
ShowCalender(The_Year,The_Month,The_Day,Firstday);
</script>
<div id=showdate></div>
</html>
评论 (0) All
