Javascript+HTML仿造VB里的MonthView控件

网络整理 - 09-19
<html>
<head>
<title>MonthView Demo</title>
<script language=javascript>
/***********************************    程序功能:日期选择                 
    特点  :javascript+HTML仿造VB里的MonthView控件   
    作者  :ken                    
    联系  :[email protected]       
    开发日期: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 onselectstart="return false">'
    output+='   <tr>'
    output+='      <td>'
    output+='        <table cellpadding=0 cellspacing=0>'
    output+='            <tr>'
    output+='                <td><input type="button"value="3" onclick="MonthView.showCurrentDate(\'preview\')"></td>'
    output+='                <td><span></span><span></span></td>'
    output+='                <td><input type="button"value="4" onclick="MonthView.showCurrentDate(\'next\')"></td>'
    output+='            </tr>'
    output+='        </table>'
    output+='      </td>'
    output+='    </tr>'
    output+='    <tr>'
    output+='      <td>'
    output+='        <table cellpadding=0 cellspacing=2>'
    output+='            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'
    output+='            <tr><td colspan=7></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 cellpadding=0 cellspacing=2>'
    output+='            <tr><td></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>
    <tr>
        <td>方法</td><td>描述</td><td>演示</td>
    </tr>
    <tr>
        <td>MonthView.initialize()</td>
        <td>初始化控件</td>
        <td><image src="http://www.xbasp.net/none.gif"></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>