原生js-日曆外掛程式

最後更新：2014-07-10 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style color width os cti for

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>日曆控制項</title>
<style type="text/css">
#calendar{ width:142px; padding:5px; height:198px; background:#FCF; -webkit-user-select:none; position:absolute;}
#calendar div.week span,#calendar span.date{ width:14px; font-size:12px; height:20px; text-align:center; line-height:20px; border:1px solid #ccc; margin:2px; float:left;}
#calendar span.date{ background:#fff; cursor:pointer;}
#calendar div.week{ clear:both; overflow:hidden;}
#calendar div.week span{ font-weight:bold;}
#calendar h6{ margin:0; padding:0; font-size:14px; line-height:20px; text-align:center; position:relative; overflow:hidden; height:20px;}
#prev,#next{ width:45px; text-align:center; position:absolute; color:blue; cursor:pointer; }
#prev{ left:0;}
#next{ right:0;}
</style>
</head>

<body>
<input type="text" value="請輸入……" id="input1">
</body>
</html>
<script>
input1.onfocus=function(){
　　createCalendar(this);
}
//input1.onfocus=new Function("this;calendar(this)");
function createCalendar(ele){
var obj=offset(ele);
var l=obj.left;
var t=obj.top;
var oCalendar=document.getElementById(‘calendar‘);
if(oCalendar)return;
oCalendar=document.createElement(‘div‘);
oCalendar.style.top=t+‘px‘;
oCalendar.style.left=l+ele.offsetWidth+5+‘px‘;
oCalendar.id="calendar";
var oTitle=document.createElement(‘h6‘);
oCalendar.appendChild(oTitle);
oTitle.className="title";
//建立上prev按鈕
var oPrev=document.createElement(‘span‘);
oPrev.id="prev";
oPrev.innerHTML="prev";
oTitle.appendChild(oPrev);
oPrev.onclick=function(){activeCalendar(--month);}
//建立中間titleContent
var oTitleContent=document.createElement(‘span‘);
//oTitleContent.id="titleContent";
oTitle.appendChild(oTitleContent);
var d=new Date;
var year=d.getFullYear();
var month=d.getMonth();
var m=month;
//oTitleContent.innerHTML=year+"年"+(month+1)+"月"
//建立next按鈕
var oNext=document.createElement(‘span‘);
oNext.id="next";
oNext.innerHTML="next";
oNext.onclick=function(){activeCalendar(++month);}
oTitle.appendChild(oNext);
//建立周的導覽列
var aWeek=["日","一","二","三","四","五","六"];
var oWeek=document.createElement(‘div‘);
oWeek.className="week";
oCalendar.appendChild(oWeek);

for(var i=0;i<7;i++){
var oSpan=document.createElement(‘span‘);
oSpan.innerHTML=aWeek[i];
oWeek.appendChild(oSpan);
}
//建立日期的容器
var oDateContent=document.createElement(‘div‘);
oDateContent.id="dateContent";
oCalendar.appendChild(oDateContent);
document.body.appendChild(oCalendar);
activeCalendar(month);
function activeCalendar(month){
oDateContent.innerHTML="";
var d1=new Date(year,month,1);
var diff=1-d1.getDay();
month=d1.getMonth();
if(diff==1)diff=-6;
d1.setDate(diff);

oTitleContent.innerHTML=d1.getFullYear()+"年"+(d1.getMonth()+2)+"月"
for(var i=0;i<42;i++){
var oSpan=document.createElement(‘span‘);
oSpan.className="date";
var currentDate=d1.getDate();
oSpan.innerHTML=currentDate;
oSpan.curDate=d1.getFullYear()+"-"+(d1.getMonth()+1)+"-"+currentDate;
if(d1.getMonth()!=month){
oSpan.style.backgroundColor="#ccc";
}
oSpan.onclick=function(){
ele.value=this.curDate;
document.body.removeChild(oCalendar);
oCalendar=null

}
d1.setDate(++currentDate);
oDateContent.appendChild(oSpan);
}
}
}

</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More