html页面：
<!doctype html><html><head> <meta charset="utf-8" /> <title>datepicker</title> <link rel="stylesheet" href="style.css" type="text/css" /> <script src="date.js"></script></head> <body><input type="text" class="datepicker" value="" id="datepicker"/></body><script> datepicker.init(‘datepicker‘);</script></html>css页面：
.ui-datepicker-wrapper{ font-size: 16px; width: 240px; display: none; color: #666; box-shadow: 2px 2px 8px 2px rgba(128,128,128,.3); position: absolute;
}.ui-datepicker-wrapper-show{ display: block;}.ui-datepicker-wrapper .ui-datepicker-header{ height: 50px; line-height: 50px; text-align: center; color: #ff6600; border-bottom: 1px solid #f0f0f0; font-weight: bold;}.ui-datepicker-wrapper .ui-datepicker-header .ui-datepicker-btn{ text-decoration: none; padding: 0 10px; color: #ff6600;}.ui-datepicker-wrapper .ui-datepicker-header .ui-datepicker-prev-btn{ float: left;}.ui-datepicker-wrapper .ui-datepicker-header .ui-datepicker-next-btn{ float: right;}.ui-datepicker-wrapper .ui-datepicker-body table{ width: 100%; text-align: center; border-collapse: collapse;}.ui-datepicker-wrapper .ui-datepicker-body th{ font-size: 12px;}.ui-datepicker-wrapper .ui-datepicker-body td{ cursor: pointer; font-size: 12px;}.disable{ background:#a7a7a7;}js页面：
(function () { var datepicker={}; var Amonth=(new Date()).getMonth()+1; var Ayear=(new Date()).getFullYear(); var $wrapper,showData; datepicker.getMonthDate=function (year,month) { var arrDate=[]; if(!year||!month){ var today=new Date(); year=today.getFullYear(); month=today.getMonth()+1; } var firstDate=new Date(year,month-1,1); var lastDate=new Date(year,month,0); var firstDay=firstDate.getDay(); console.log(‘第一天是当月第一个星期的星期：‘+firstDay); var lastDay=lastDate.getDay(); var monthNum=lastDate.getDate(); console.log(‘最后一天是最后一个星期的星期：‘+lastDay); console.log("这个月有"+monthNum+"天"); var monthTotal=firstDay+monthNum+6-lastDay; for(var i=1;i<=monthNum;i++) { arrDate.push(i); } for(var j=1;j<=6-lastDay;j++){ arrDate.push(‘‘); } var prevmonthDate=(new Date(year,month-1,0)).getDate(); for(var k=prevmonthDate;k>=prevmonthDate-firstDay;k--){ arrDate.unshift(‘‘); } console.log(year+‘-‘+month); var html=‘‘; var p=0; html+= "<div class=‘ui-datepicker-header‘>"+ "<a href=‘#‘ class=‘ui-datepicker-btn ui-datepicker-prev-btn‘><</a>"+ "<a href=‘#‘ class=‘ui-datepicker-btn ui-datepicker-next-btn‘>></a>"+ "<span class=‘ui-datepicker-curr-month‘>"+year+"年"+month+"月</span>"+ "</div>"+ "<div class=‘ui-datepicker-body‘>"+ "<table>"+ "<thead>"+ "<tr>"+ "<th>日</th>"+ "<th>一</th>"+ "<th>二</th>"+ "<th>三</th>"+ "<th>四</th>"+ "<th>五</th>"+ "<th>六</th>"+ "</tr>"+ "</thead>"; for(var x=1;x<=monthTotal/7;x++){ html+=‘<tr>‘; for(var y=1;y<=7;y++){ p++; html+="<td>"+arrDate[p]+"</td>"; } html+=‘</tr>‘; } html+=‘</table></div>‘; return { ‘year‘:year, ‘month‘:month, ‘html‘:html}; } datepicker.render=function (year,month) { showData=this.getMonthDate(year,month); if($wrapper){ $wrapper.innerHTML=showData.html; document.body.appendChild($wrapper); }else { $wrapper=document.createElement("div"); $wrapper.className="ui-datepicker-wrapper"; $wrapper.innerHTML=showData.html; document.body.appendChild($wrapper); } } datepicker.init=function (dom) { datepicker.render(Ayear,Amonth); var $dom=document.getElementById(dom); var $flag=false; $dom.addEventListener(‘click‘,function () { if($flag){ $wrapper.classList.remove(‘ui-datepicker-wrapper-show‘); $flag=false; }else { $wrapper.classList.add(‘ui-datepicker-wrapper-show‘); $flag=true; var left=$dom.offsetLeft; var top=$dom.offsetTop; var height=$dom.offsetHeight; $wrapper.style.left=left+‘px‘; $wrapper.style.top=top+height+2+‘px‘; } }); $wrapper.addEventListener(‘click‘,function (e) { var $target=e.target; if(!$target.classList.contains(‘ui-datepicker-btn‘)){ return;} //上个月 if($target.classList.contains(‘ui-datepicker-prev-btn‘)){ if(Amonth<=1){ Amonth=12; Ayear--; }else{ Amonth--; } datepicker.render(Ayear,Amonth);
}; //下个月 if($target.classList.contains(‘ui-datepicker-next-btn‘)){ if(Amonth>=12){ Amonth=1; Ayear++; }else { Amonth++; } datepicker.render(Ayear,Amonth);
} }); $wrapper.addEventListener(‘click‘,function (e) { var $target=e.target; if($target.tagName.toLowerCase()!==‘td‘){ return; }else{ function padding(num) { if(num>9){ return num; }else { return ‘0‘+num; } } if(!$target.innerText){ return; }else { var ret = ‘‘; ret = showData.year + ‘-‘ + padding(showData.month) + ‘-‘ + padding($target.innerText); $dom.value = ret; $wrapper.classList.remove(‘ui-datepicker-wrapper-show‘); $flag = false; } }
}) } window.datepicker=datepicker;})();
时间： 2025-01-07 12:07:13