js日历

<div class='data_box'id='data_box'>
    <input type='text'class='showDate' value='点击选择日期' />
    <div class='sel_date dn'>
        <div class='clearfix'>
            <span class='prev_y fl'>&lt;&lt;</span><span class='prev_m fl'>&lt;</span>
            <span class='next_y fr'>&gt;&gt;</span><span class='next_m fr'>&gt;</span>
            <div class='show_mn'>
                <input disabled type='text' class='showDate2 year' value='选择年份' />
                <span class='ml5 mr5'>年</span>
                <input disabled type='text' class='showDate2 month' value='选择月份' />
                <span class='ml5'>月</span>
            </div>
        </div>
        <table class='data_table'>
            <thead>
            <tr>
                <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
            </tr>
            </thead>
            <tbody id='tbody'>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

* {padding:0;margin:0;font-size:12px;}
.fl {float:left}
.fr {float:right}
.dn {display:none}
/* begin*/
.data_box           {width:260px; }
.showDate           {width:248px;height:30px;line-height:30px;padding:0 5px;border:1px solid #e1e1e1;color:#999;display:block;cursor:pointer}
.show_mn            {text-align:center;padding:0 20px;}
.sel_date           {margin-top:10px;border:1px solid #999;padding:3px}
.data_table         {width:100%;margin-top:10px;}
.data_table td      {text-align:center;cursor:pointer;height:24px;font-size:14px;}
.data_table td.active{color:#fff;background-color:#999}
.data_table td.hover{color:blue;}
.showDate2          {width:35px;padding:3px 5px;color:#999;border:1px solid #e1e1e1;text-align:center}
.showDate2.active   {border:1px solid #c50000; }
.prev_m,.next_m     {width:10px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px'}

.prev_y,.next_y     {width:18px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px';margin:0 5px;}

function getclass(parent,classname){
    var tags=parent.getElementsByTagName('*');
    var temp=[];
    for(var i=0;i<tags.length;i++){
        if(tags[i].className.match(new RegExp('(^|\s+)' + classname + '(\s+|$)'))){
            temp.push(tags[i]);
        }
    }
    return temp;
}

function showDate(option){
    this.obj=document.getElementById(option.id);
}


showDate.prototype.init= function () {

    var _self=this;
    this.dateText=getclass(_self.obj,'showDate')[0];
    this.dateBox=getclass(_self.obj,'sel_date')[0];
    this.yearBox =getclass(_self.obj, 'year')[0];
    this.mnBox = getclass(_self.obj, 'month')[0];

    //td beblow the tbody
    this.td=document.getElementById('tbody').getElementsByTagName('td');


    this.prevM=getclass(this.dateBox,'prev_m')[0];
    this.prevY=getclass(this.dateBox,'prev_y')[0];
    this.nextM=getclass(this.dateBox,'next_m')[0];
    this.nextY=getclass(this.dateBox,'next_y')[0];
        //add clickEvent for four button to choose month and year

   this.prevM.onclick= function () {
       var month=_self.mnBox.value;
       var year=_self.yearBox.value;
       if(month>1){
            _self.mnBox.value=--month;
       }else{
            _self.yearBox.value=--year;
            _self.mnBox.value=12;
       }
   }



    this.nextM.onclick= function () {
        var month=_self.mnBox.value;
        var year=_self.yearBox.value;
        if(month<12){
            _self.mnBox.value=++month;
        }else{
            _self.yearBox.value=++year;
            _self.mnBox.value=1;
        }
    }

    this.prevY.onclick= function () {
        var year=_self.yearBox.value;
        _self.yearBox.value=--year;
    }

    this.nextY.onclick= function () {
        var year=_self.yearBox.value;
        _self.yearBox.value=++year;
    }

    //click to show calen

    this.dateText.onfocus= function () {
        _self.clearDefault(this);
        _self.show();
        _self.showNow();
    }

    //onblur when set defalut
    this.dateText.onblur= function () {
        _self.setDefault(this);
    }



}



//clear the DefaultValue

showDate.prototype.clearDefault= function (obj) {
    var deVal=obj.defaultValue;
    if(obj.value==deVal){
        obj.value='';
    }
}


//set the DefaultValue if there is nothing

showDate.prototype.setDefault= function (obj) {
    var deVal=obj.defaultValue;
    if(obj.value==''){
        obj.value=deVal;
    }
}


showDate.prototype.show= function () {
    if(this.dateBox.className.match('dn')){
        this.dateBox.className=this.dateBox.className.replace('dn','')
    }
}


showDate.prototype.showNow= function () {
    //show year and month
    var now=new Date();
    var year=now.getFullYear();
    var month=now.getMonth()+1;
    var date=now.getDate();
    this.yearBox.value=year;
    this.mnBox.value=month;

    //show days
    var first = new Date(year, month - 1, 1);
    var firstDay=first.getDay();

    var arr31 = [1, 3, 5, 7, 8, 10, 12];
    var day;
    var _self=this;
    if(arr31.indexOf(month.toString())){
        day=31;
    }else if(month==2){
        if((year%4==0 && year%100!=0)||(year%400==0)){
            day=29;
        }else{
            day=28;
        }
    }else{
        day=30;
    }

    for (var i = 0,len=_self.td.length; i <len; i++) {
        _self.td[i].innerHTML = '';
        _self.td[i].className = _self.td[i].className.replace('active', '');
    }

    for(var j= 0,len=day;j<len;j++){
        this.td[firstDay+j].innerHTML=j+1;
        if(j+1==date && this.td[firstDay+j].className.indexOf('active')==-1){
            _self.td[j + firstDay].className += ' ';
            _self.td[j + firstDay].className += 'active';
        }
    }
    this.dateBox.onclick= function (event) {
        var e=event || window.event;
        var target= e.srcElement? e.srcElement: e.target;
        var  year=_self.yearBox.value;
        var month=_self.mnBox.value;
        for (var i = 0,len=_self.td.length; i <len; i++) {
            _self.td[i].className = _self.td[i].className.replace('active', '');
        }
        target.className+=' '+'active';
        if(typeof parseInt(target.innerHTML)=='number' && target.innerHTML!=='' && isNaN(target.innerHTML)==false){
            console.log(parseInt(target.innerHTML));
            _self.dateText.value=year+' 年 '+month+' 月 '+target.innerHTML+' 日';
            _self.dateBox.className+=' '+'dn';
        }
    }
}




window.onload= function () {

    var showDate1=new showDate({id:'data_box'});
    showDate1.init();

}