简单时间插件
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;
})();
