javascript日期选择器

　　以前自己用过dojo的calander，也用过jquery的calander，一直觉得在网页上实现这个是件非常神奇的事情。

　　现在自己也动手写了一个试试，其实倒是挺简单的，就是写javascript函数的时候觉得比较繁琐。。。

　　首先就是要实现calander的样式，直接用div+css实现，这点倒是比较方便。

　　然后就是加入各种javascript函数

javascript代码:(Calander.js)

// JavaScript Document

var date;
function $(str){
    return document.getElementById(str);
}

function nextMonth(){
    if(date.getMonth()==11){
        date=new Date(date.getFullYear()+1,0,1);
    }else{
        date=new Date(date.getFullYear(),date.getMonth()+1,1);
    }
    setDate(date);
}
function nextYear(){
    date=new Date(date.getFullYear()+1,date.getMonth(),1);
    setDate(date);
}
function lastMonth(){
    if(date.getMonth()==0){
        date=new Date(date.getFullYear()-1,11,1);
    }else{
        date=new Date(date.getFullYear(),date.getMonth()-1.1);
    }
    setDate(date);
}
function lastYear(){
    date=new Date(date.getFullYear()-1,date.getMonth(),1);
    setDate(date);
}
function showTime(obj){
    alert(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+obj.innerHTML);
}

function setDate(date){
    var now=date;
    var year=now.getFullYear();
    var month=now.getMonth();
    var day=now.getDate();
    var allDays=(new Date(year,month+1,0)).getDate();       //得到这个月一共有多少天，下一个月的第0号就是上个月的最后一天
    var week=(new Date(year,month,1)).getDay();
    var str=year+"-"+(month+1)+"-"+day;
    var lis=$("top").getElementsByTagName("li");
    lis[2].innerHTML=str;
    var noUse=week;
    var nowDay=1;
    var i;
    str="";
    str+="<ul>";    
    for(i=1;i<=7;i++){
        if(noUse>0){
            noUse--;
            str+="<li>&nbsp;&nbsp;</li>";
        }else{
            str+="<li  onclick='showTime(this);'>"+nowDay+"</li>";
            nowDay++;
        }
        
    }
    str+="</ul>";
    var i1;
    for(i1=1;i1<=5;i1++){
        str+="<ul>";
        for(i=1;i<=7;i++){
            if(nowDay<=allDays){
                str+="<li  onclick='showTime(this);'>"+nowDay+"</li>";
                nowDay++;
            }else{
                str+="<li>&nbsp;&nbsp;</li>";
            }
        }
        str+="</ul>";
    }
    $("day").innerHTML=str;
}


function initCalander(){
    var str="<div id='top'><ul><li onclick='lastYear();'><<</li><li onclick='lastMonth();'><</li><li></li>"+
            "<li onclick='nextMonth();'>></li><li onclick='nextYear();'>>></li></ul></div>"+
            "<div id='weekTop'><ul><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>"+
            "</div><div id='day'></div>";
    $("Calander").innerHTML=str;
    $("Calander").style.display='block';
    date=new Date();
    setDate(date);
}

 

css代码（Calander.css)：

/* CSS Document */

#Calander{
    position:absolute;
    display:none;
    border:1px solid #000000;
    height:158px;
    width:156px;
}
#top{
    position:absolute;
    left:3px;
    top:0px;
}
#top ul{
    padding:0px;
    margin:0px;
}
#top li{
    float:left;
    margin:3px;
    list-style:none;
    cursor:pointer;
}
#top li:hover{
    background-color:#999999;
}
#weekTop{
    position:absolute;
    top:25px;
    background-color:#00FF99;
}
#weekTop ul{
    margin:0px;
    padding:0px;
}
#weekTop li{
    float:left;
    margin:3px;
    list-style:none;
}
#day{
    position:absolute;
    top:50px;
    width:154px;
}
#day ul{
    margin:0px;
    padding:0px;
    border:0px;
}
#day li{
    text-align:center;
    width:22px;
    float:left;
    list-style:none;
    cursor:pointer;
}
#day li:hover{
    background-color:#99FF00;
}



最后就是html代码了：

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>aa</TITLE>


<script src="Calander.js" type="text/javascript">
</script>
<link rel="stylesheet" href="Calander.css" type="text/css" />
</head>

<BODY >
<button onClick="initCalander();">aa</button>

<div id="Calander">
</div> 

</BODY>
</HTML>



posted on 2011-12-03 22:25  fjs_cloud  阅读(242)  评论(0)    收藏  举报

导航