js日曆控件開發
最終日曆控件實例代碼地址：http://www.oschina.net/code/snippet_2352644_55198javascript
什麼是日曆控件？效果什麼樣子？這是一個網站上的在線演示效果：http://www.jq22.com/yanshi5303css
咱們開發的最終實現就是大體這個樣子，咱們簡單把效果的邏輯簡單概述：html
一個inputjava
咱們點擊input會彈出日曆控件node
咱們點擊日曆控件的日期就會顯示到input中express
日曆控件的年月可更改選擇cookie
能夠清除input的日期app
咱們這樣就簡單的概述了這個效果，下面咱們就會出現下面的疑問？函數
在js中，時期是怎麼獲取和設置！測試
此次的實例開發講解，會分爲2篇，日曆控件實例相對來講要先有準備知識的瞭解，咱們在之前的博客中只有在cookie中簡單介紹過date對象的gmt轉化方法。
一.date對象基本知識
1.date對象建立
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>date</title> <style type="text/css"> </style> </head> <body> <input type="text" id="date" value="日曆控件"/> </body> <script type="text/javascript"> var dateObj = new Date(); alert(typeof dateObj); </script> </html>
經過Date類咱們直接可建立date對象，在建立對象，不設置參數的狀況下，默認的date對象使用當前時間作參數。
好比今天是2016/4/5那麼日期對象的年 月 日分別就是2016 4 5。
2.date對象讀取
讀取就是拿，拿到日期對象中咱們想要的具體內容，好比：年，月，日，時分秒，等等等。
咱們獲取年月日：
var dateObj = new Date();
alert("年："+dateObj.getFullYear());
alert("月："+dateObj.getMonth());
alert("日："+dateObj.getDate());
日期對象月是返回0-11，因此咱們拿到的值+1纔是真實月份。
獲取周：
var dateObj = new Date();
alert("周："+dateObj.getDay());
周的特殊之處就是星期日的處理，返回是0。
獲取時分秒：
var dateObj = new Date();
alert("時："+dateObj.getHours());
alert("分："+dateObj.getMinutes());
alert("秒："+dateObj.getSeconds());
這裏的返回值都是從0開始，0其實就是對應表明了24小時，60分鐘，60秒，和周相似。
獲取毫秒：
更加精確的時間，不在很特殊時咱們也不會拿去的，和秒的關係 1秒=1000毫秒
var dateObj = new Date();
alert("毫秒："+dateObj.getMilliseconds());
同理，返回0表明1000毫秒值。
返回 1970 年 1 月 1 日至今的毫秒數：
這個就是unix時間戳的使用了，咱們會拿到距離時間：
var dateObj = new Date();
alert("距離 1970 年 1 月 1 日的毫秒數："+dateObj.getTime());
咱們採用默認參數，date對象就是當前時間，獲取就是這個時間距離1970/1/1的毫秒數。
轉爲GMTString時間：
這個就是咱們cookie過時時間的使用了：
var dateObj = new Date();
alert("GMTString："+dateObj.toUTCString());
這實際上是一種日期格式，cookie你必須用這種格式，咱們使用的方法是如今推薦的，toGMTString()不被推薦使用。
其實除了這些，還有根據世界時間的返回，咱們這裏就不在介紹了。
3.date對象設置
幾乎全部的獲取操做，都會對應設置操做，咱們建立了date對象，對象包含各類日期信息（年，月，日等），這些信息其實都是來自new時的參數，咱們默認採用當前。
咱們還能修改對象中的各類信息，修改了咱們在獲取，就是拿到修改的信息了。
咱們設置年月日：
var dateObj = new Date();
alert("默認年："+dateObj.getFullYear());
alert("默認月："+dateObj.getMonth());
alert("默認日："+dateObj.getDate());
dateObj.setFullYear(2008);
dateObj.setMonth(8);
dateObj.setDate(8);
alert("修改後年："+dateObj.getFullYear());
alert("修改後月："+dateObj.getMonth());
alert("修改後日："+dateObj.getDate());
咱們先獲取默認參數的時間，而後設置指定的年月日，獲取時就知道確實修改了對應信息。
其餘的時分秒相似不作介紹。
根據距離 1970 年 1 月 1 日至今的毫秒數設置日期對象：
與gettime正好相反的操做，get是拿到毫秒，set是根據毫秒設置修改date的全部信息。
var dateObj = new Date();
alert("默認年："+dateObj.getFullYear());
alert("默認月："+dateObj.getMonth());
alert("默認日："+dateObj.getDate());
var now=dateObj.getTime();//獲取1970毫秒
var prev=now-24*60*60*1000;//獲取昨天距離1970的毫秒，減去一天的毫秒數，一天是24小時，1小時60分鐘，1分鐘60秒，1秒是1000毫秒
dateObj.setTime(prev);
alert("修改後年："+dateObj.getFullYear());
alert("修改後月："+dateObj.getMonth());
alert("修改後日："+dateObj.getDate());
二.date對象小實例
僅僅知道了date的建立，設置和獲取是不足以讓咱們靈活運用它，咱們下面經過開發多個小實例，增強咱們對date的使用和了解。
實例1：頁面今日日期顯示
在一些網站，咱們會看到顯示今天的年月日和星期幾信息，咱們怎麼把這些信息顯示到頁面當中？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
</style>
</head>
<body>
<input type="text" id="date" value="日曆控件"/>
<div id="show"></div>
</body>
<script type="text/javascript">
var show=document.getElementById("show");
var dateObj = new Date();
var year=dateObj.getFullYear();
var month=dateObj.getMonth();//0是12月
var day=dateObj.getDate();
var week=dateObj.getDay();//0是星期日
show.innerHTML="當前日期"+year+"年"+month+"月"+day+"日"+"星期"+week;
</script>
</html>
截圖：
經過截圖，咱們看到的已知問題就是月份，月份是要+1的，由於返回值是0-11表明1-12月，一個隱藏問題就是星期，若是是星期日，返回是0；對於轉化映射的處理，咱們能夠採用js的switch case語句。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
</style>
</head>
<body>
<input type="text" id="date" value="日曆控件"/>
<div id="show"></div>
</body>
<script type="text/javascript">
var show=document.getElementById("show");
var dateObj = new Date();
var year=dateObj.getFullYear();
var month=toyear(dateObj.getMonth());//0是12月
var day=dateObj.getDate();
var week=toweek(dateObj.getDay());//0是星期日
show.innerHTML="當前日期"+year+"年"+month+"月"+day+"日"+week;
function toweek(week){
switch(week)
{
case 0:
return "星期日";
break;
case 1:
return "星期一";
break;
case 2:
return "星期二";
break;
case 3:
return "星期三";
break;
case 4:
return "星期四";
break;
case 5:
return "星期五";
break;
case 6:
return "星期六";
break;
default:
};
};
function toyear(month){
switch(month)
{
case 0:
return "1";
break;
case 1:
return "2";
break;
case 2:
return "3";
break;
case 3:
return "4";
break;
case 4:
return "5";
break;
case 5:
return "6";
break;
case 6:
return "7";
break;
case 7:
return "8";
break;
case 8:
return "9";
break;
case 9:
return "10";
break;
case 10:
return "11";
break;
case 11:
return "12";
break;
default:
};
};
</script>
</html>
截圖：
達到咱們想要的結果。
實例2：簡單時鐘
一個時鐘，就會包含時分秒這些信息，而且會動態變化，咱們利用常用的setinterval函數，而且把間隔設置爲1000也就是1秒就正好知足動態變化的需求：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
</style>
</head>
<body>
<input type="text" id="date" value="日曆控件"/>
<div id="show"></div>
</body>
<script type="text/javascript">
var show=document.getElementById("show");
var dateObj = new Date();
var hour=tohour(dateObj.getHours());
var minu=tominu(dateObj.getMinutes());
var sec=tosec(dateObj.getSeconds());
show.innerHTML=hour+"時"+minu+"分"+sec+"秒";
setInterval(function(){
dateObj = new Date();
hour=tohour(dateObj.getHours());
minu=tominu(dateObj.getMinutes());
sec=tosec(dateObj.getSeconds());
show.innerHTML=hour+"時"+minu+"分"+sec+"秒";
},1000);
function tohour(t){
if(t==0){
return 24;
}else{
return t;
};
};
function tominu(t){
if(t==0){
return 60;
}else{
return t;
};
};
function tosec(t){
if(t==0){
return 60;
}else{
return t;
};
};
</script>
</html>
效果截圖：
三.本月日曆
1.靜態結構建立
今天是2016年4月5日，咱們想要把4月的全部信息顯示出來，而且把5日特殊標記，大概樣子是這樣的：
最上面的月和年是比較簡單的，咱們直接獲取就能夠了，下面的內容就比較麻煩了，咱們分析發現，
1.本月的信息會所有顯示，
2.並且1號這一天根據它所在的周，要在前面出現留空位置，
3.5這個就是當前日，加入特殊標記。
咱們先不考慮動態處理問題，咱們先把靜態結構完成，用寫死的形式把這個效果寫出來：
效果截圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
#box{width:350px;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#999; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con div.now{background:#09F; color:#fff;}
</style>
</head>
<body>
<div id="box">
<div id="title">
<div id="month"></div>
<div id="year"></div>
</div>
<div id="week">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div id="con">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="now">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var dateObj = new Date();
var year=dateObj.getFullYear();
var month=toyear(dateObj.getMonth());//0是12月
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
function toyear(month){
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>
2.動態處理日期
咱們把日的顯示寫死，咱們只要利用動態處理，就能夠完成動態建立了，咱們要想完成留空的處理，咱們要獲取的信息包含以下：
1.本月1日是星期幾？若是是星期5，也就是返回了5，那麼留空就是5,是星級1，返回1留空就是1
2.獲取這個月日的總個數，這個簡單1 3 5 7 8 10 12哈哈，31天永不差，需注意閏年，用做循環建立全部的日
3.返回今日，好比這個例子返回5，再循環中咱們要判斷等於5的加入特殊處理
如何獲取本月1日信息？
咱們只要先建立一個默認的日期對象，而後利用setdate(1)把對象的日設置爲1其實就獲取了本月1號的信息，而後然獲取所在的周，就首先拿到了留空個數：
//獲取本月1號的周值 var oneyear = new Date(); oneyear.setDate(1); var oneweek=oneyear.getDay(); alert(oneweek)
很是的完美，下面咱們實現2，也就是拿到本月總的日數，基本規律就是口訣，不過咱們先判斷一把是不是閏年，要遇到2月特殊處理：
判斷閏年條件①：非整百年數除以4，無餘爲閏，有餘爲平；②整百年數除以400，無餘爲閏有餘平。
//閏年判斷函數
function isLeapYear(year) {
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
咱們測試輸出總日數：
//本月總日數
var alld=alldays(year,dateObj.getMonth());
alert(alld);
//獲取本月總日數方法
function alldays(year,month){
if(isLeapYear(year)){//閏年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//閏年判斷函數
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
最後一個重要信息，當前日：
//當前是幾 var nowd=dateObj.getDate(); alert(nowd);
準備工做完成，咱們初始化顯示咱們的時間：
//初始化顯示本月信息
init(oneweek,alld,nowd);
//初始化日期顯示方法
function init(oneweek,alld,nowd){
for(var i=1;i<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常區域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now";
con.appendChild(eday);
}else{
eday.innerHTML=i;
con.appendChild(eday);
};
};
};
咱們把全部代碼整理，看到下面截圖效果：
效果沒有變，不過內容是經過js添加：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
#box{width:350px;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#999; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con div.now{background:#09F; color:#fff;}
</style>
</head>
<body>
<div id="box">
<div id="title">
<div id="month"></div>
<div id="year"></div>
</div>
<div id="week">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div id="con"></div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//月年的顯示
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var con=document.getElementById("con");
var dateObj = new Date();
var year=dateObj.getFullYear();
var month=toyear(dateObj.getMonth());//0是12月
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
//獲取本月1號的周值
var oneyear = new Date();
oneyear.setDate(1);
var oneweek=oneyear.getDay();
//本月總日數
var alld=alldays(year,dateObj.getMonth());
//當前是幾
var nowd=dateObj.getDate();
//初始化顯示本月信息
init(oneweek,alld,nowd);
//初始化日期顯示方法
function init(oneweek,alld,nowd){
for(var i=1;i<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常區域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now";
con.appendChild(eday);
}else{
eday.innerHTML=i;
con.appendChild(eday);
};
};
};
//獲取本月總日數方法
function alldays(year,month){
if(isLeapYear(year)){//閏年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//閏年判斷函數
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
//月份轉化方法
function toyear(month){
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>
四.動態日曆
什麼是動態，就是能夠利用上一頁或者下一頁查看上一個月，下一個月，上上一個月的日曆信息！
咱們把本身程序進一步優化，讓更多的獲取來自函數：
通過一頓的修正，咱們把近乎全部獲取操做都經過new的date實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
#box{width:350px;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#999; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con div.now{background:#09F; color:#fff;}
</style>
</head>
<body>
<div id="box">
<div id="title">
<div id="month"></div>
<div id="year"></div>
</div>
<div id="week">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div id="con"></div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//===================get ele===============================
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var con=document.getElementById("con");
//===================set year month===============================
//默認時間對象
var dateObj = new Date();
var year=dateObj.getFullYear();
var month=toyear(dateObj);//0是12月
//月年的顯示
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
//===================set day===============================
//獲取本月1號的周值
var oneweek=oneyearoneday(dateObj);
//本月總日數
var alld=alldays(dateObj);
//當前是幾
var nowd=nowday(dateObj);
//初始化顯示本月信息
init(oneweek,alld,nowd);
//===================function===============================
//初始化日期顯示方法
function init(oneweek,alld,nowd){
for(var i=1;i<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常區域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now";
con.appendChild(eday);
}else{
eday.innerHTML=i;
con.appendChild(eday);
};
};
};
//獲取本月1號的周值
function oneyearoneday(dateObj){
var oneyear = new Date();
var year=dateObj.getFullYear();
var month=dateObj.getMonth();//0是12月
oneyear.setFullYear(year);
oneyear.setMonth(month);//0是12月
oneyear.setDate(1);
return oneyear.getDay();
};
//當前是幾
function nowday(dateObj){
return dateObj.getDate();
};
//獲取本月總日數方法
function alldays(dateObj){
var year=dateObj.getFullYear();
var month=dateObj.getMonth();
if(isLeapYear(year)){//閏年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//閏年判斷函數
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
//月份轉化方法
function toyear(dateObj){
var month=dateObj.getMonth()
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>
咱們如何檢驗結果的活躍性呢？咱們只要把new date的月份作一次修改，就能夠檢測結果了：
設置爲上一個月，看結果：
有些完美了是否是，咱們試想若是這中設置方式結合頁面處理，是否是就成就了咱們的實現，。
五.加入上一月下一月
咱們先修改結構，加入上一月和下一月的按鈕：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
#box{width:350px;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#999; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con div.now{background:#09F; color:#fff;}
#prevmonth,#nextmonth{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
</style>
</head>
<body>
<div id="box">
<div id="title">
<div id="prevmonth"><</div>
<div id="month"></div>
<div id="year"></div>
<div id="nextmonth">></div>
</div>
<div id="week">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div id="con"></div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//===================get ele===============================
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var con=document.getElementById("con");
//===================set year month===============================
//默認時間對象
var dateObj = new Date();
//動態控制
//dateObj.setMonth(1);
//年月獲取
var year=dateObj.getFullYear();
var month=toyear(dateObj);//0是12月
//月年的顯示
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
//===================set day===============================
//獲取本月1號的周值
var oneweek=oneyearoneday(dateObj);
//本月總日數
var alld=alldays(dateObj);
//當前是幾
var nowd=nowday(dateObj);
//初始化顯示本月信息
init(oneweek,alld,nowd);
//===================function===============================
//初始化日期顯示方法
function init(oneweek,alld,nowd){
for(var i=1;i<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常區域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now";
con.appendChild(eday);
}else{
eday.innerHTML=i;
con.appendChild(eday);
};
};
};
//獲取本月1號的周值
function oneyearoneday(dateObj){
var oneyear = new Date();
var year=dateObj.getFullYear();
var month=dateObj.getMonth();//0是12月
oneyear.setFullYear(year);
oneyear.setMonth(month);//0是12月
oneyear.setDate(1);
return oneyear.getDay();
};
//當前是幾
function nowday(dateObj){
return dateObj.getDate();
};
//獲取本月總日數方法
function alldays(dateObj){
var year=dateObj.getFullYear();
var month=dateObj.getMonth();
if(isLeapYear(year)){//閏年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//閏年判斷函數
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
//月份轉化方法
function toyear(dateObj){
var month=dateObj.getMonth()
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>
效果截圖：
如今咱們就要進一步處理，就是點擊上一個月或者一下月修改日的顯示，而且上面的年月也要修改，不斷上一月咱們會到2015年甚至更之前。
六.開發上一月下一月控制程序
拿到：
var prevmonth=document.getElementById("prevmonth");
var nextmonth=document.getElementById("nextmonth");
事件就是單擊事件了，咱們簡單處理：
prevmonth.onclick=function(){//上一月
};
nextmonth.onclick=function(){//下一月
};
貪多嚼不爛，咱們先把上一月處理好，再去看下一月：
上一月，就和上篇博客最後同樣，咱們只要把月設置爲當前-1；
//動態控制
prevmonth.onclick=function(){//上一月
var ddm=dateObj.getMonth()-1;
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
固然，二次賦值前先清除：
function remove(){
con.innerHTML="";
};
咱們還要加個判斷限制，當處在1月，在點擊上一月，年要發生變化，月變爲上一年的12月：
prevmonth.onclick=function(){//上一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()-1)==-1){
ddm=11;
ddy=dateObj.getFullYear()-1;
}else{
ddm=dateObj.getMonth()-1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
看如今所有代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
#box{width:350px;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#999; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con div.now{background:#09F; color:#fff;}
#prevmonth,#nextmonth{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
</style>
</head>
<body>
<div id="box">
<div id="title">
<div id="prevmonth"><</div>
<div id="month"></div>
<div id="year"></div>
<div id="nextmonth">></div>
</div>
<div id="week">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div id="con"></div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//===================get ele===============================
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var con=document.getElementById("con");
var prevmonth=document.getElementById("prevmonth");
var nextmonth=document.getElementById("nextmonth");
//===================set year month===============================
//默認時間對象
var dateObj = new Date();
//動態控制
prevmonth.onclick=function(){//上一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()-1)==-1){
ddm=11;
ddy=dateObj.getFullYear()-1;
}else{
ddm=dateObj.getMonth()-1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextmonth.onclick=function(){//下一月
};
//年月獲取
var year=dateObj.getFullYear();
var month=toyear(dateObj);//0是12月
//月年的顯示
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
//===================set day===============================
//獲取本月1號的周值
var oneweek=oneyearoneday(dateObj);
//本月總日數
var alld=alldays(dateObj);
//當前是幾
var nowd=nowday(dateObj);
//初始化顯示本月信息
init(oneweek,alld,nowd);
//===================function===============================
//初始化日期顯示方法
function remove(){
con.innerHTML="";
};
function init(oneweek,alld,nowd){
for(var i=1;i<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常區域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now";
con.appendChild(eday);
}else{
eday.innerHTML=i;
con.appendChild(eday);
};
};
};
//獲取本月1號的周值
function oneyearoneday(dateObj){
var oneyear = new Date();
var year=dateObj.getFullYear();
var month=dateObj.getMonth();//0是12月
oneyear.setFullYear(year);
oneyear.setMonth(month);//0是12月
oneyear.setDate(1);
return oneyear.getDay();
};
//當前是幾
function nowday(dateObj){
return dateObj.getDate();
};
//獲取本月總日數方法
function alldays(dateObj){
var year=dateObj.getFullYear();
var month=dateObj.getMonth();
if(isLeapYear(year)){//閏年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//閏年判斷函數
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
//月份轉化方法
function toyear(dateObj){
var month=dateObj.getMonth()
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>
咱們補全下一月處理，測試：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
#box{width:350px;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#999; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con div.now{background:#09F; color:#fff;}
#prevmonth,#nextmonth{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
</style>
</head>
<body>
<div id="box">
<div id="title">
<div id="prevmonth"><</div>
<div id="month"></div>
<div id="year"></div>
<div id="nextmonth">></div>
</div>
<div id="week">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div id="con"></div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//===================get ele===============================
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var con=document.getElementById("con");
var prevmonth=document.getElementById("prevmonth");
var nextmonth=document.getElementById("nextmonth");
//===================set year month===============================
//默認時間對象
var dateObj = new Date();
//動態控制
prevmonth.onclick=function(){//上一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()-1)==-1){
ddm=11;
ddy=dateObj.getFullYear()-1;
}else{
ddm=dateObj.getMonth()-1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextmonth.onclick=function(){//下一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()+1)==12){
ddm=0;
ddy=dateObj.getFullYear()+1;
}else{
ddm=dateObj.getMonth()+1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//年月獲取
var year=dateObj.getFullYear();
var month=toyear(dateObj);//0是12月
//月年的顯示
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
//===================set day===============================
//獲取本月1號的周值
var oneweek=oneyearoneday(dateObj);
//本月總日數
var alld=alldays(dateObj);
//當前是幾
var nowd=nowday(dateObj);
//初始化顯示本月信息
init(oneweek,alld,nowd);
//===================function===============================
//初始化日期顯示方法
function remove(){
con.innerHTML="";
};
function init(oneweek,alld,nowd){
for(var i=1;i<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常區域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now";
con.appendChild(eday);
}else{
eday.innerHTML=i;
con.appendChild(eday);
};
};
};
//獲取本月1號的周值
function oneyearoneday(dateObj){
var oneyear = new Date();
var year=dateObj.getFullYear();
var month=dateObj.getMonth();//0是12月
oneyear.setFullYear(year);
oneyear.setMonth(month);//0是12月
oneyear.setDate(1);
return oneyear.getDay();
};
//當前是幾
function nowday(dateObj){
return dateObj.getDate();
};
//獲取本月總日數方法
function alldays(dateObj){
var year=dateObj.getFullYear();
var month=dateObj.getMonth();
if(isLeapYear(year)){//閏年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//閏年判斷函數
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
//月份轉化方法
function toyear(dateObj){
var month=dateObj.getMonth()
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>
七.開發上一年下一年控制程序
和月份處理相似，我直接粘貼代碼了：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
#box{width:350px;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#999; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con div.now{background:#09F; color:#fff;}
#prevmonth,#nextmonth,#prevyear,#nextyear{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
</style>
</head>
<body>
<div id="box">
<div id="title">
<div id="prevyear"><<</div>
<div id="prevmonth"><</div>
<div id="month"></div>
<div id="year"></div>
<div id="nextmonth">></div>
<div id="nextyear">>></div>
</div>
<div id="week">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div id="con"></div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//===================get ele===============================
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var con=document.getElementById("con");
var prevmonth=document.getElementById("prevmonth");
var nextmonth=document.getElementById("nextmonth");
var prevyear=document.getElementById("prevyear");
var nextyear=document.getElementById("nextyear");
//===================set year month===============================
//默認時間對象
var dateObj = new Date();
//動態控制
prevmonth.onclick=function(){//上一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()-1)==-1){
ddm=11;
ddy=dateObj.getFullYear()-1;
}else{
ddm=dateObj.getMonth()-1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextmonth.onclick=function(){//下一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()+1)==12){
ddm=0;
ddy=dateObj.getFullYear()+1;
}else{
ddm=dateObj.getMonth()+1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
prevyear.onclick=function(){//上一年
var ddy=dateObj.getFullYear()-1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextyear.onclick=function(){//下一年
var ddy=dateObj.getFullYear()+1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//年月獲取
var year=dateObj.getFullYear();
var month=toyear(dateObj);//0是12月
//月年的顯示
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
//===================set day===============================
//獲取本月1號的周值
var oneweek=oneyearoneday(dateObj);
//本月總日數
var alld=alldays(dateObj);
//當前是幾
var nowd=nowday(dateObj);
//初始化顯示本月信息
init(oneweek,alld,nowd);
//===================function===============================
//初始化日期顯示方法
function remove(){
con.innerHTML="";
};
function init(oneweek,alld,nowd){
for(var i=1;i<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常區域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now";
con.appendChild(eday);
}else{
eday.innerHTML=i;
con.appendChild(eday);
};
};
};
//獲取本月1號的周值
function oneyearoneday(dateObj){
var oneyear = new Date();
var year=dateObj.getFullYear();
var month=dateObj.getMonth();//0是12月
oneyear.setFullYear(year);
oneyear.setMonth(month);//0是12月
oneyear.setDate(1);
return oneyear.getDay();
};
//當前是幾
function nowday(dateObj){
return dateObj.getDate();
};
//獲取本月總日數方法
function alldays(dateObj){
var year=dateObj.getFullYear();
var month=dateObj.getMonth();
if(isLeapYear(year)){//閏年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//閏年判斷函數
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
//月份轉化方法
function toyear(dateObj){
var month=dateObj.getMonth()
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>
到這一步，咱們的日曆控件已經出具模型了。
八.返回當前時期
咱們應該加一個按鈕，無論處在那一年，咱們均可以點擊後當即回到今時今日：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
*{ margin:0; padding:0;}
a{ text-decoration:none; outline:none;}
body a{outline:none;blr:expression(this.onFocus=this.blur());}
img{ border:none;}
ul{ list-style:none;}
body{ color:#666666; font-size:14px; font-family:"微軟雅黑"; background-color:#fff; height:100%; overflow-y:scroll;*overflow-y:inherit;}
/*html{ height:100%;}*/
.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.clearfix{ zoom:1;}
#box{width:350px;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#999; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con div.now{background:#09F; color:#fff;}
#prevmonth,#nextmonth,#prevyear,#nextyear{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#btns{width:350px; height:40px;}
#nowtime{ float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
#nowtime:hover{background:#ddd;}
</style>
</head>
<body>
<div id="box">
<div id="title">
<div id="prevyear"><<</div>
<div id="prevmonth"><</div>
<div id="month"></div>
<div id="year"></div>
<div id="nextmonth">></div>
<div id="nextyear">>></div>
</div>
<div id="week">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div id="con" class="clearfix"></div>
<div id="btns">
<div id="nowtime">當前時間</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//===================get ele===============================
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var con=document.getElementById("con");
var prevmonth=document.getElementById("prevmonth");
var nextmonth=document.getElementById("nextmonth");
var prevyear=document.getElementById("prevyear");
var nextyear=document.getElementById("nextyear");
var nowtime=document.getElementById("nowtime");
//===================set year month===============================
//默認時間對象
var dateObj = new Date();
//動態控制
prevmonth.onclick=function(){//上一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()-1)==-1){
ddm=11;
ddy=dateObj.getFullYear()-1;
}else{
ddm=dateObj.getMonth()-1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextmonth.onclick=function(){//下一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()+1)==12){
ddm=0;
ddy=dateObj.getFullYear()+1;
}else{
ddm=dateObj.getMonth()+1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
prevyear.onclick=function(){//上一年
var ddy=dateObj.getFullYear()-1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextyear.onclick=function(){//下一年
var ddy=dateObj.getFullYear()+1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//返回到今時今日
nowtime.onclick=function(){
var dddate=new Date();
var ddm=dddate.getMonth();
var ddy=dddate.getFullYear();
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//年月獲取
var year=dateObj.getFullYear();
var month=toyear(dateObj);//0是12月
//月年的顯示
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
//===================set day===============================
//獲取本月1號的周值
var oneweek=oneyearoneday(dateObj);
//本月總日數
var alld=alldays(dateObj);
//當前是幾
var nowd=nowday(dateObj);
//初始化顯示本月信息
init(oneweek,alld,nowd);
//===================function===============================
//初始化日期顯示方法
function remove(){
con.innerHTML="";
};
function init(oneweek,alld,nowd){
for(var i=1;i<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常區域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now";
con.appendChild(eday);
}else{
eday.innerHTML=i;
con.appendChild(eday);
};
};
};
//獲取本月1號的周值
function oneyearoneday(dateObj){
var oneyear = new Date();
var year=dateObj.getFullYear();
var month=dateObj.getMonth();//0是12月
oneyear.setFullYear(year);
oneyear.setMonth(month);//0是12月
oneyear.setDate(1);
return oneyear.getDay();
};
//當前是幾
function nowday(dateObj){
return dateObj.getDate();
};
//獲取本月總日數方法
function alldays(dateObj){
var year=dateObj.getFullYear();
var month=dateObj.getMonth();
if(isLeapYear(year)){//閏年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//閏年判斷函數
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
//月份轉化方法
function toyear(dateObj){
var month=dateObj.getMonth()
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>
九.與輸入文本框綁定
個人時間控件默認是不可見的在input獲取焦點時纔會顯示：
默認隱藏，最簡單就是直接none掉，input獲取焦點咱們blcok，位置利用絕對定位，獲取input相對頁面的left和top賦值給box便可：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
*{ margin:0; padding:0;}
a{ text-decoration:none; outline:none;}
body a{outline:none;blr:expression(this.onFocus=this.blur());}
img{ border:none;}
ul{ list-style:none;}
body{ color:#666666; font-size:14px; font-family:"微軟雅黑"; background-color:#fff; height:100%; overflow-y:scroll;*overflow-y:inherit;}
/*html{ height:100%;}*/
.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.clearfix{ zoom:1;}
#box{width:350px; position:absolute;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#CCC; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con .edate{background:#999;}
#con .edate:hover{background:#09F; color:#fff;}
#con div.now{background:#09F; color:#fff;}
#prevmonth,#nextmonth,#prevyear,#nextyear{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#btns{width:350px; height:40px;}
#nowtime{ float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
#nowtime:hover{background:#ddd;}
</style>
</head>
<body>
<input type="text" id="date" value="" style="height:40px; line-height:40px; margin:200px;"/>
<div id="box" style="display:none;">
<div id="title">
<div id="prevyear"><<</div>
<div id="prevmonth"><</div>
<div id="month"></div>
<div id="year"></div>
<div id="nextmonth">></div>
<div id="nextyear">>></div>
</div>
<div id="week">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div id="con" class="clearfix"></div>
<div id="btns">
<div id="nowtime">當前時間</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//===================get ele===============================
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var con=document.getElementById("con");
var prevmonth=document.getElementById("prevmonth");
var nextmonth=document.getElementById("nextmonth");
var prevyear=document.getElementById("prevyear");
var nextyear=document.getElementById("nextyear");
var nowtime=document.getElementById("nowtime");
var date=document.getElementById("date");
var box=document.getElementById("box");
//===================show date===============================
date.onfocus=function(){//顯示控件
var datel=this.getBoundingClientRect().left;
var datet=this.getBoundingClientRect().top+40;
box.style.left=datel+"px";
box.style.top=datet+"px";
box.style.display="block";
};
con.onclick=function(event){
if(event.target.tagName=="DIV" && event.target.nodeType=="1" && hasclass(event.target.className,"edate")){
date.value="";
date.value=dateObj.getFullYear()+"-"+toyear(dateObj)+"-"+event.target.innerHTML;
box.style.display="none";
};
};
//===================set year month===============================
//默認時間對象
var dateObj = new Date();
//動態控制
prevmonth.onclick=function(){//上一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()-1)==-1){
ddm=11;
ddy=dateObj.getFullYear()-1;
}else{
ddm=dateObj.getMonth()-1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextmonth.onclick=function(){//下一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()+1)==12){
ddm=0;
ddy=dateObj.getFullYear()+1;
}else{
ddm=dateObj.getMonth()+1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
prevyear.onclick=function(){//上一年
var ddy=dateObj.getFullYear()-1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextyear.onclick=function(){//下一年
var ddy=dateObj.getFullYear()+1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//返回到今時今日
nowtime.onclick=function(){
var dddate=new Date();
var ddm=dddate.getMonth();
var ddy=dddate.getFullYear();
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//年月獲取
var year=dateObj.getFullYear();
var month=toyear(dateObj);//0是12月
//月年的顯示
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
//===================set day===============================
//獲取本月1號的周值
var oneweek=oneyearoneday(dateObj);
//本月總日數
var alld=alldays(dateObj);
//當前是幾
var nowd=nowday(dateObj);
//初始化顯示本月信息
init(oneweek,alld,nowd);
//===================function===============================
//有無指定類名的判斷
function hasclass(str,cla){
var i=str.search(cla);
if(i==-1){
return false;
}else{
return true;
};
};
//初始化日期顯示方法
function remove(){
con.innerHTML="";
};
function init(oneweek,alld,nowd){
for(var i=1;i<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常區域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now edate";
con.appendChild(eday);
}else{
eday.innerHTML=i;
eday.className="edate";
con.appendChild(eday);
};
};
};
//獲取本月1號的周值
function oneyearoneday(dateObj){
var oneyear = new Date();
var year=dateObj.getFullYear();
var month=dateObj.getMonth();//0是12月
oneyear.setFullYear(year);
oneyear.setMonth(month);//0是12月
oneyear.setDate(1);
return oneyear.getDay();
};
//當前是幾
function nowday(dateObj){
return dateObj.getDate();
};
//獲取本月總日數方法
function alldays(dateObj){
var year=dateObj.getFullYear();
var month=dateObj.getMonth();
if(isLeapYear(year)){//閏年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//閏年判斷函數
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
//月份轉化方法
function toyear(dateObj){
var month=dateObj.getMonth()
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>
在點擊日曆我加入了三個判斷，都是保證正確值的點擊處理
十.清空操做
這個就很是簡單了，咱們加入清空按鈕：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
*{ margin:0; padding:0;}
a{ text-decoration:none; outline:none;}
body a{outline:none;blr:expression(this.onFocus=this.blur());}
img{ border:none;}
ul{ list-style:none;}
body{ color:#666666; font-size:14px; font-family:"微軟雅黑"; background-color:#fff; height:100%; overflow-y:scroll;*overflow-y:inherit;}
/*html{ height:100%;}*/
.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.clearfix{ zoom:1;}
#box{width:350px; position:absolute;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#CCC; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con .edate{background:#999;}
#con .edate:hover{background:#09F; color:#fff;}
#con div.now{background:#09F; color:#fff;}
#prevmonth,#nextmonth,#prevyear,#nextyear{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#btns{width:350px; height:40px;}
#nowtime{ float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
#nowtime:hover{background:#ddd;}
#cleartime{float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
</style>
</head>
<body>
<input type="text" id="date" value="" style="height:40px; line-height:40px; margin:200px;"/>
<div id="box" style="display:none;">
<div id="title">
<div id="prevyear"><<</div>
<div id="prevmonth"><</div>
<div id="month"></div>
<div id="year"></div>
<div id="nextmonth">></div>
<div id="nextyear">>></div>
</div>
<div id="week">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div id="con" class="clearfix"></div>
<div id="btns">
<div id="nowtime">當前時間</div>
<div id="cleartime">清空</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//===================get ele===============================
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var con=document.getElementById("con");
var prevmonth=document.getElementById("prevmonth");
var nextmonth=document.getElementById("nextmonth");
var prevyear=document.getElementById("prevyear");
var nextyear=document.getElementById("nextyear");
var nowtime=document.getElementById("nowtime");
var date=document.getElementById("date");
var box=document.getElementById("box");
var cleartime=document.getElementById("cleartime");
//===================show date===============================
date.onfocus=function(){//顯示控件
var datel=this.getBoundingClientRect().left;
var datet=this.getBoundingClientRect().top+40;
box.style.left=datel+"px";
box.style.top=datet+"px";
box.style.display="block";
};
con.onclick=function(event){
if(event.target.tagName=="DIV" && event.target.nodeType=="1" && hasclass(event.target.className,"edate")){
date.value="";
date.value=dateObj.getFullYear()+"-"+toyear(dateObj)+"-"+event.target.innerHTML;
box.style.display="none";
};
};
cleartime.onclick=function(event){
date.value="";
};
//===================set year month===============================
//默認時間對象
var dateObj = new Date();
//動態控制
prevmonth.onclick=function(){//上一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()-1)==-1){
ddm=11;
ddy=dateObj.getFullYear()-1;
}else{
ddm=dateObj.getMonth()-1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextmonth.onclick=function(){//下一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()+1)==12){
ddm=0;
ddy=dateObj.getFullYear()+1;
}else{
ddm=dateObj.getMonth()+1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
prevyear.onclick=function(){//上一年
var ddy=dateObj.getFullYear()-1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextyear.onclick=function(){//下一年
var ddy=dateObj.getFullYear()+1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//返回到今時今日
nowtime.onclick=function(){
var dddate=new Date();
var ddm=dddate.getMonth();
var ddy=dddate.getFullYear();
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//年月獲取
var year=dateObj.getFullYear();
var month=toyear(dateObj);//0是12月
//月年的顯示
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
//===================set day===============================
//獲取本月1號的周值
var oneweek=oneyearoneday(dateObj);
//本月總日數
var alld=alldays(dateObj);
//當前是幾
var nowd=nowday(dateObj);
//初始化顯示本月信息
init(oneweek,alld,nowd);
//===================function===============================
//有無指定類名的判斷
function hasclass(str,cla){
var i=str.search(cla);
if(i==-1){
return false;
}else{
return true;
};
};
//初始化日期顯示方法
function remove(){
con.innerHTML="";
};
function init(oneweek,alld,nowd){
for(var i=1;i<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常區域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now edate";
con.appendChild(eday);
}else{
eday.innerHTML=i;
eday.className="edate";
con.appendChild(eday);
};
};
};
//獲取本月1號的周值
function oneyearoneday(dateObj){
var oneyear = new Date();
var year=dateObj.getFullYear();
var month=dateObj.getMonth();//0是12月
oneyear.setFullYear(year);
oneyear.setMonth(month);//0是12月
oneyear.setDate(1);
return oneyear.getDay();
};
//當前是幾
function nowday(dateObj){
return dateObj.getDate();
};
//獲取本月總日數方法
function alldays(dateObj){
var year=dateObj.getFullYear();
var month=dateObj.getMonth();
if(isLeapYear(year)){//閏年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//閏年判斷函數
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
//月份轉化方法
function toyear(dateObj){
var month=dateObj.getMonth()
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>
十一.生產完整代碼
對比參照控件，咱們幾乎沒有差異了。
其實一個頁面能夠有多個input，這時候咱們的時間控件結構應該經過js插入生成，固然更多的擴展等你來加入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
*{ margin:0; padding:0;}
a{ text-decoration:none; outline:none;}
body a{outline:none;blr:expression(this.onFocus=this.blur());}
img{ border:none;}
ul{ list-style:none;}
body{ color:#666666; font-size:14px; font-family:"微軟雅黑"; background-color:#fff; height:100%; overflow-y:scroll;*overflow-y:inherit;}
/*html{ height:100%;}*/
.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.clearfix{ zoom:1;}
#box{width:350px; position:absolute;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#CCC; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con .edate{background:#999;}
#con .edate:hover{background:#09F; color:#fff;}
#con div.now{background:#09F; color:#fff;}
#prevmonth,#nextmonth,#prevyear,#nextyear{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#btns{width:350px; height:40px;}
#nowtime{ float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
#nowtime:hover{background:#ddd;}
#cleartime{float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
</style>
</head>
<body>
<input type="text" id="date" value="" style="height:40px; line-height:40px; margin:200px;"/>
<div id="box" style="display:none;">
<div id="title">
<div id="prevyear"><<</div>
<div id="prevmonth"><</div>
<div id="month"></div>
<div id="year"></div>
<div id="nextmonth">></div>
<div id="nextyear">>></div>
</div>
<div id="week">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div id="con" class="clearfix"></div>
<div id="btns">
<div id="nowtime">當前時間</div>
<div id="cleartime">清空</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//===================get ele===============================
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var con=document.getElementById("con");
var prevmonth=document.getElementById("prevmonth");
var nextmonth=document.getElementById("nextmonth");
var prevyear=document.getElementById("prevyear");
var nextyear=document.getElementById("nextyear");
var nowtime=document.getElementById("nowtime");
var date=document.getElementById("date");
var box=document.getElementById("box");
var cleartime=document.getElementById("cleartime");
//===================show date===============================
date.onfocus=function(){//顯示控件
var datel=this.getBoundingClientRect().left;
var datet=this.getBoundingClientRect().top+40;
box.style.left=datel+"px";
box.style.top=datet+"px";
box.style.display="block";
};
con.onclick=function(event){
if(event.target.tagName=="DIV" && event.target.nodeType=="1" && hasclass(event.target.className,"edate")){
date.value="";
date.value=dateObj.getFullYear()+"-"+toyear(dateObj)+"-"+event.target.innerHTML;
box.style.display="none";
};
};
cleartime.onclick=function(event){
date.value="";
};
//===================set year month===============================
//默認時間對象
var dateObj = new Date();
//動態控制
prevmonth.onclick=function(){//上一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()-1)==-1){
ddm=11;
ddy=dateObj.getFullYear()-1;
}else{
ddm=dateObj.getMonth()-1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextmonth.onclick=function(){//下一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()+1)==12){
ddm=0;
ddy=dateObj.getFullYear()+1;
}else{
ddm=dateObj.getMonth()+1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
prevyear.onclick=function(){//上一年
var ddy=dateObj.getFullYear()-1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextyear.onclick=function(){//下一年
var ddy=dateObj.getFullYear()+1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//返回到今時今日
nowtime.onclick=function(){
var dddate=new Date();
var ddm=dddate.getMonth();
var ddy=dddate.getFullYear();
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//年月獲取
var year=dateObj.getFullYear();
var month=toyear(dateObj);//0是12月
//月年的顯示
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
//===================set day===============================
//獲取本月1號的周值
var oneweek=oneyearoneday(dateObj);
//本月總日數
var alld=alldays(dateObj);
//當前是幾
var nowd=nowday(dateObj);
//初始化顯示本月信息
init(oneweek,alld,nowd);
//===================function===============================
//有無指定類名的判斷
function hasclass(str,cla){
var i=str.search(cla);
if(i==-1){
return false;
}else{
return true;
};
};
//初始化日期顯示方法
function remove(){
con.innerHTML="";
};
function init(oneweek,alld,nowd){
for(var i=1;i<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常區域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now edate";
con.appendChild(eday);
}else{
eday.innerHTML=i;
eday.className="edate";
con.appendChild(eday);
};
};
};
//獲取本月1號的周值
function oneyearoneday(dateObj){
var oneyear = new Date();
var year=dateObj.getFullYear();
var month=dateObj.getMonth();//0是12月
oneyear.setFullYear(year);
oneyear.setMonth(month);//0是12月
oneyear.setDate(1);
return oneyear.getDay();
};
//當前是幾
function nowday(dateObj){
return dateObj.getDate();
};
//獲取本月總日數方法
function alldays(dateObj){
var year=dateObj.getFullYear();
var month=dateObj.getMonth();
if(isLeapYear(year)){//閏年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//閏年判斷函數
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
//月份轉化方法
function toyear(dateObj){
var month=dateObj.getMonth()
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>
相關文章
- 1. JavaScript日曆控件開發
- 2. JS處理日曆控件
- 3. 簡單js日曆控件
- 4. 帶農曆日曆的DatePicker控件！Xamarin控件開發小記
- 5. 帶你開發一個日曆控件
- 6. selenium - js日曆控件處理
- 7. JAVA中的Calendar---------------js日曆控件
- 8. selenium+Python(Js處理日曆控件)
- 9. JS日曆控件大集合
- 10. chrome日曆插件開發
- 更多相關文章...
- • ASP.NET HtmlAnchor 控件 - ASP.NET 教程
- • ASP.NET HtmlButton 控件 - ASP.NET 教程
- • PHP開發工具
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章