<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'><<</span><span class='prev_m fl'><</span> <span class='next_y fr'>>></span><span class='next_m fr'>></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(); }