IDC资讯中心
<html>
<head>
<title>monthview demo</title>
<script language=javascript>
/*********************************** 程序功能：日期选择
特点 ：javascript+html仿造vb里的monthview控件
作者 ：ken
联系 ：boboshu@21cn.com
开发日期：2002-8-5
\***********************************/
var languagename="cn" //内容显示的语言 value:"cn" "en"
var currentmonth,currentyear
var nowdate,nowmonth,nowyear
d=new date();
nowdate=d.getdate()
nowmonth=d.getmonth()
nowyear=d.getyear()
currentmonth=nowmonth
currentyear=nowyear
arrweekcaption_cn = new array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
arrweekcaption_en = new array("sun","mon","tue","wed","thu","fri","sat")
arrmonthcaption_cn= new array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月")
arrmonthcaption_en= new array("january","february","march","april","may","june","july","august","september","october","november","december")
function monthview(){}
/******************************* 初始化控件
\*******************************/
function monthview.initialize(){
output =<table cellpadding=0 cellspacing=2 style="border: 1 solid black;width:300;cursor:default" id="tblmonthview" onselectstart="return false">
output+= <tr>
output+= <td>
output+= <table width="100%" cellpadding=0 cellspacing=0>
output+= <tr style="padding-top:10;padding-bottom:10;background:menu;" id="trcaption">
output+= <td><input type="button"value="3" style="height:22;font-family:webdings" onclick="monthview.showcurrentdate(\preview\)"></td>
output+= <td align="center"><span id="spancurrentmonth" style="font-size:12;"></span><span style="padding-left:10;font-size:12" id="spancurrentyear"></span></td>
output+= <td align="right"><input type="button"value="4" style="height:22;font-family:webdings" onclick="monthview.showcurrentdate(\next\)"></td>
output+= </tr>
output+= </table>
output+= </td>
output+= </tr>
output+= <tr>
output+= <td>
output+= <table width="100%" cellpadding=0 cellspacing=2 id="tblshowday" style="font-size:12">
output+= <tr align="center"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
output+= <tr><td colspan=7 height="1" style="background:black" id="tdline"></td></tr>
output+= <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
output+= </table>
output+= </td>
output+= </tr>
output+= <tr>
output+= <td>
output+= <table width="100%" cellpadding=0 cellspacing=2 id="tbltoday" style="font-size:12">
output+= <tr><td width="20"></td><td></td></tr>
output+= </table>
output+= </td>
output+= </tr>
output+=</table>
document.write (output)
//*********当前年、月的显示*********
monthview.setcurrentcaption()
//*********************************
//*********星期表头的显示*********
monthview.setweekcaption()
//*********************************
//*********设置每月的日期*********
monthview.bulidday()
//*****************************
//*********显示隐藏今日日期*********
monthview.setshowhidetoday(true)
//*****************************
}
function monthview.setcurrentcaption(){
spancurrentyear.innerhtml=currentyear
if (languagename=="cn"){
spancurrentmonth.innerhtml=arrmonthcaption_cn[currentmonth]
}else{
spancurrentmonth.innerhtml=arrmonthcaption_en[currentmonth]
}
}
function monthview.setweekcaption(){
if (languagename=="cn"){
arrcaption=arrweekcaption_cn
}else{
arrcaption=arrweekcaption_en
}
for (var i=0; i<arrcaption.length; i++){
tblshowday.rows[0].cells[i].innerhtml=arrcaption[i]
}
}
function monthview.bulidday(){
arrmonthcount=new array(31,28,31,30,31,30,31,31,30,31,30,31)
if ((currentyear % 400 ==0) || ((currentyear % 100==0)&&(currentyear % 4==0))){
arrmonthcount[1]=29
}
rowday=2
while (tblshowday.rows.length>rowday){
tblshowday.deleterow(rowday)
}
firstday=new date(currentyear,currentmonth,1)
temprow=tblshowday.insertrow()
//*********填充当月1号以前的日期*********
for (var j=0 ;j<firstday.getday();j++){
tempcell=temprow.insertcell()
}
//*************************************
for (var i=1 ;i<=arrmonthcount[currentmonth]; i++){
tempcell=temprow.insertcell()
tempcell.style.textalign="center"
tempcell.innerhtml=i
tempcell.onclick=monthview.action
if ((i+firstday.getday()) %7 == 0 && i!=arrmonthcount[currentmonth]){temprow=tblshowday.insertrow()}
}
}
function monthview.showcurrentdate(direction){
if (direction=="preview"){
currentmonth–
if (currentmonth<0) {currentmonth=11 ;currentyear–}
}
if (direction=="next"){
currentmonth++
if (currentmonth>11) {currentmonth=0 ;currentyear++}
}
monthview.setcurrentcaption()
monthview.bulidday()
}
function monthview.setlanguage(itsname){
languagename=itsname
monthview.setcurrentcaption()
monthview.setweekcaption()
monthview.setshowhidetoday(true)
}
function monthview.setcaptionbg(itscolor){
trcaption.style.background=itscolor
}
function monthview.setborder(itsborder){
tblmonthview.style.border=itsborder
}
function monthview.setlinecolor(itscolor){
tdline.style.background=itscolor
}
function monthview.setshowhidetoday(flag){
el=tbltoday.rows[0].cells[1]
if (flag){
if (languagename=="cn"){
el.innerhtml="今日："+nowyear+"-"+(nowmonth+1)+"-"+nowdate
}else{
el.innerhtml="today:"+nowyear+"-"+(nowmonth+1)+"-"+nowdate
}
el.style.display="block"
}else{
el.style.display="none"
}
}
function monthview.action(){
//*********请修改此函数*********
monthview_value=currentyear+"-"+(currentmonth+1)+"-"+this.innerhtml
alert(monthview_value)
}
</script>
</head>
<body>
<div>
<script language=javascript>
monthview.initialize()
</script>
</div>
<br><br>
<table border=1 style="font-size:12;width:95%">
<tr>
<td>方法</td><td>描述</td><td>演示</td>
</tr>
<tr>
<td>monthview.initialize()</td>
<td>初始化控件</td>
<td><image src="none.gif" width="1" height="1"></td>
</tr>
<tr>
<td>monthview.setlanguage(<i>par</i>)<br>参数："cn" "en"</td>
<td>设置控件显示语言</td>
<td>
<input type="button" value="中文" onclick="monthview.setlanguage(cn)">
<input type="button" value="英文" onclick="monthview.setlanguage(en)">
</td>
</tr>
<tr>
<td>monthview.setborder(<i>par</i>)<br>参数："边框宽度(int) 边框形状(solid|dot…) 边框颜色"</td>
<td>边框设置</td>
<td>
<input type="button" value="changeborder" onclick="monthview.setborder(2 solid darkred)">
</td>
</tr>
<tr>
<td>monthview.setcaptionbg(<i>par</i>)<br>参数：十六进制颜色代码</td>
<td>设置当前年、月的背景色</td>
<td>
<input type="button" value="infobackground" onclick="monthview.setcaptionbg(infobackground)">
</td>
</tr>
<tr>
<td>monthview.setlinecolor(<i>par</i>)<br>参数：十六进制颜色代码</td>
<td>设置分割线的颜色</td>
<td>
<input type="button" value="darkred" onclick="monthview.setlinecolor(darkred)">
</td>
</tr>
<tr>
<td>monthview.setshowhidetoday(<i>par</i>)<br>参数：true|false</td>
<td>显示／隐藏今日日期</td>
<td>
<input type="button" value="hide" onclick="monthview.setshowhidetoday(false)">
<input type="button" value="show" onclick="monthview.setshowhidetoday(true)">
</td>
</tr>
</table>
</body>
</html>
